最近在研究通過文本和代碼創建圖標和可視化，Mermaid功能比較豐富，Web支持也比較友好。如何讓GitHub Pages中通過Markdown編輯的博客也支持Mermaid呢？

完整示例

<pre><code class="language-mermaid">graph LR
A--&gt;B
</code></pre>

<script type="module">
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10.0.2/+esm';
mermaid.initialize({ startOnLoad: false });
await mermaid.run({
  querySelector: '.language-mermaid',
});
</script>

graph LR
A-->B

GitHub Pages

通過Markdown編輯的博客中：

```mermaid
graph LR
A-->B
```

然後在全局腳本模板底部添加以下內容：

<script type="module">
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10.0.2/+esm';
mermaid.initialize({ startOnLoad: false });
await mermaid.run({
  querySelector: '.language-mermaid',
});
</script>

參考文檔

• Mermaid Usage
• How to make GitHub Pages Markdown support mermaid diagram?
• jeffreytse/jekyll-spaceship
• PlantUML
• D2 Tour

歡迎關注我的微信公眾號：乘風破浪的Coder