在 ghost 中支持 mermaid

之前一直以为 ghost 支持不了 mermaid。。

最近看到某博主在 ghost 中加入了 mermaid 支持，研究了一下步骤，看起来和之前我加讨饭链接的方法差不多：

code injection

在管理界面的 code injection 中增加

<script src="https://unpkg.com/mermaid@8.0.0/dist/mermaid.min.js"></script>
<script>mermaid.initialize({startOnLoad:true});</script>

具体的版本可以看这里。

因为 ghost 的 markdown editor 原生不支持 mermaid，所以要显示 mermaid 的话，需要贴 html 标签进来：

<div class="mermaid">
sequenceDiagram
    participant I as Informer
    participant SC as ServiceController
    participant Q as WorkQueue
    participant B as Balancer
    I-&gt;&gt;+SC: Add/Update/DeleteService
    SC-&gt;&gt;Q: Add
    Q--&gt;&gt;SC: return
    deactivate SC
    loop Worker
        SC-&gt;&gt;+Q: Get
        Q--&gt;&gt;-SC: key
        SC-&gt;&gt;SC: syncService
        SC-&gt;&gt;+B: EnsureLoadBalancer
        B--&gt;&gt;-SC: LoadBalancerStatus
    end
</div>

显示效果像下面这样：

sequenceDiagram participant I as Informer participant SC as ServiceController participant Q as WorkQueue participant B as Balancer I->>+SC: Add/Update/DeleteService SC->>Q: Add Q-->>SC: return deactivate SC loop Worker SC->>+Q: Get Q-->>-SC: key SC->>SC: syncService SC->>+B: EnsureLoadBalancer B-->>-SC: LoadBalancerStatus end

graph TD A --> B F --> B B --> C C --> D D --> End