Mermaid

文章参考了Hugo博客添加mermaid作图 文章可以使用Mermaid添加流程图等，来增强信息传递效率和阅读体验，但PaperMod原生似乎并不支持（或者支持得不好？）Mermaid。 修改方法 在项目目录layouts/shortcodes下添加mermaid.html，内容如下： 1 2 3 <div class="mermaid" align="center"> {{.Inner}} </div> 复制主题目录themes/hugo-PaperMod/layouts/partials下的header.html到项目目录layouts/partials，然后在开头插入以下内容： 1 2 3 {{ if (.Params.mermaid) }} <script async src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script> {{ end }} 在archetypes/default.md或者对应的模板头里添加以下内容： 1 mermaid: true 使用方法 把Markdown的语法标识替换为用{{}}包换的<mermaid>和</mermaid>标签（由于会直接被识别成shortcode进行解析，只能用语言描述），包括住实际的mermaid代码。 graph LR a-->b-.->c

从其它平台迁移而来 语法 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 gantt %注释 title 这是标题 %输入数据的时间格式 dateFormat YYYY-MM-DD %坐标轴的时间格式 axisFormat %m-%d %排除的时间 excludes weekends %坐标轴刻度，高版本支持 tickInterval 1day %是否显示当天的标记，默认on todayMarker off section 项目A %任务描述 : [任务状态,] [任务名称,] 开始时间, 时长或结束时间 任务1 : done, a1, 2023-03-01, 3d 任务2 : active, a2, after a1, 2023-03-08 里程碑 : milestone, a3, 2023-03-07, 1d section 项目B 任务1 : b1, 2023-03-07, 4000m 任务2 : crit, b2, after a2, 15h gantt %注释 title 这是标题 dateFormat YYYY-MM-DD axisFormat %m-%d excludes weekends %tickInterval 1day todayMarker off section 项目A 任务1 : done, a1, 2023-03-01, 3d 任务2 : active, a2, after a1, 2023-03-08 里程碑 : milestone, a3, 2023-03-07, 1d section 项目B 任务1 : b1, 2023-03-07, 4000m 任务2 : crit, b2, after a2, 15h 输入数据的时间格式 关键字dateFormat后的内容用于声明输入数据的时间格式，具体如下：...

从其它平台迁移而来 语法 1 2 3 4 5 6 7 --- title: 流程图名称 # 可能会有渲染不支持 --- graph/flowchart [TB/TD|BT|LR|RL] 节点名即内容 节点名1[节点内容] 节点名2["节点内容"] graph 节点名即内容 节点名1[节点内容] 节点名2["带引号节点内容"] 节点 1 2 graph 默认节点 graph 默认节点 1 2 graph a1[矩形] graph a1[矩形] 1 2 graph a2(圆角矩形) graph a2(圆角矩形) 1 2 graph a3{菱形} graph a3{菱形} 1 2 graph a4((圆形)) graph a4((圆形)) 1 2 graph a5>旗形] graph a5>旗形] 1 2 graph a6{{尖端矩形}} graph a6{{尖端矩形}} 1 2 graph a7([圆端矩形]) graph a7([圆端矩形]) 1 2 graph a8[\平行四边形1\] graph a8[\平行四边形1\] 1 2 graph a9[/平行四边形2/] graph a9[/平行四边形2/] 1 2 graph a10[/梯形1\] graph a10[/梯形1\] 1 2 graph a11[\梯形2/] graph a11[\梯形2/] 1 2 graph a12[[子程序]] graph a12[[子程序]] 1 2 graph a13[(圆柱形)] graph a13[(圆柱形)] 1 2 graph a14(((双圆))) # 高版本渲染支持 graph a14(((双圆))) 布局 标识 含义 备注 TB/TD 从上到下 默认 BT 从下到上 LR 从左到右 RL 从右到左 TB/TD graph a --> b BT graph BT a --> b LR graph LR a --> b RL graph RL a --> b 连线 普通连线 线形 1单位长 2单位长 3单位长 细实线 --- ---- ----- 细实线箭头 --> ---> ----> 粗实线 === ==== ===== 粗实线箭头 ==> ===> ====> 虚线 -....

从其它平台迁移而来 一直比较喜欢用Markdown格式写点东西，如：记笔记、列计划等。但是当需要在Markdown中插入一些图片时，尤其是那些会经常发生变动的图片时（例如：流程图），简直痛不欲生，因为需要重新用工具修改图片后再链接进Markdown里。 如果能直接在Markdown里编写并生成图片，简直不要太开心。所幸这个问题已经有大佬给出了解决方案，那就是Mermaid。 个人理解：Mermaid是一种类似于Markdown中代码块高亮渲染的东西，可以把特定的纯文本渲染成对应的图片（流程图等）。Mermaid仅仅是一种渲染，并非Markdown的原生语法，所以，能不能看到图片以及图片最终呈现的样子，还要看对应的编辑器或页面是否对Mermaid进行支持及具体的渲染实现。 语法 在Markdown中嵌入Mermaid，语法与嵌入代码块的语法类似，即原先写c、java等的地方写为mermaid，之间写上具体的Mermaid内容即可。 1 2 3 4 ```mermaid # 开始 graph TD # 类型 Start --> Stop # 具体内容 ``` # 结束 经渲染后如下： graph TD Start --> Stop 分类 1. 流程图 见上面的示例。 2. 时序图 1 2 3 4 sequenceDiagram Alice->>John: Hello John, how are you? John-->>Alice: Great! Alice-)John: See you later! sequenceDiagram Alice->>John: Hello John, how are you? John-->>Alice: Great! Alice-)John: See you later! 3. 类图 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 classDiagram Animal <|-- Duck Animal <|-- Fish Animal <|-- Zebra Animal : +int age Animal : +String gender Animal: +isMammal() Animal: +mate() class Duck{ +String beakColor +swim() +quack() } class Fish{ -int sizeInFeet -canEat() } class Zebra{ +bool is_wild +run() } classDiagram Animal <|-- Duck Animal <|-- Fish Animal <|-- Zebra Animal : +int age Animal : +String gender Animal: +isMammal() Animal: +mate() class Duck{ +String beakColor +swim() +quack() } class Fish{ -int sizeInFeet -canEat() } class Zebra{ +bool is_wild +run() } 4....