给网站增加显示Mermaid图形能力
网站都是用Markdown书写的，支持Mermaid似乎也在情理之中，下边咱们来实现一下。
对mermaid的支持需要从网站模版层面入手，这样，每次渲染的时候，就会自动渲染mermaid代码。
我们在我们的模版themes/mainroad下新建目录layouts/_default/_markup/，然后新建文件render-codeblock-mermaid.html，内容如下：
<pre class="mermaid">
{{- .Inner | htmlEscape | safeHTML }}
</pre>
{{ .Page.Store.Set "hasMermaid" true }}
接着，我们在layouts/_default/baseof.html的head标签最后，增加以下代码：
{{ if .Store.Get "hasMermaid" }}
<script type="module">
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.esm.min.mjs';
mermaid.initialize({ startOnLoad: true });
</script>
{{ end }}
// 以下代码是为了支持awesome符号
<link
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
rel="stylesheet"
/>
我们测试如下：
流程图
flowchart TD A[所有工作] -->B(1.申请免费域名) A-->D(2.申请Cloudflare账号) D-->E(绑定域名到Cloudflare) E-->R(创建站点并授权) R-->S(设置域名) A-->C(3.申请Github账号) C-->G(克隆mainroad模版库) G-->F(创建仓库myblog) F-->H(创建personal access tokens) H--settings/developer settings-->J(创建Fine-grained Token) J--myblog/settings/secrets and variables-->K(创建Actions secrets<PERSONAL_TOKEN>) A-->L(4.Hugo环境) L-->M(创建网站) M-->N(配置网站) N-->P(创建文章) P-->Q(配置工作流) A-->T(5.Mermaid) T-->T1(Font Awesome)
架构图
architecture-beta
group api(cloud)[API]
service db(database)[Database] in api
service disk1(disk)[Storage] in api
service disk2(disk)[Storage] in api
service server(server)[Server] in api
db:L -- R:server
disk1:T -- B:server
disk2:T -- B:db
看板
---
config:
kanban:
ticketBaseUrl: 'https://mermaidchart.atlassian.net/browse/#TICKET#'
---
kanban
Todo
[Create Documentation]
docs[Create Blog about the new diagram]
[In progress]
id6[Create renderer so that it works in all cases. We also add som extra text here for testing purposes. And some more just for the extra flare.]
id9[Ready for deploy]
id8[Design grammar]@{ assigned: 'knsv' }
id10[Ready for test]
id4[Create parsing tests]@{ ticket: MC-2038, assigned: 'K.Sveidqvist', priority: 'High' }
id66[last item]@{ priority: 'Very Low', assigned: 'knsv' }
id11[Done]
id5[define getData]
id2[Title of diagram is more than 100 chars when user duplicates diagram with 100 char]@{ ticket: MC-2036, priority: 'Very High'}
id3[Update DB function]@{ ticket: MC-2037, assigned: knsv, priority: 'High' }
id12[Can't reproduce]
id3[Weird flickering in Firefox]
序列图
sequenceDiagram
actor Alice
actor Bob
Alice->>Bob: Hi Bob
Bob->>Alice: Hi Alice
