用思源笔记绘图 |Mermaid

之前会一直觉得 Mermaid 画图很闲得无聊，但是看到用 mermaid 画的饼图 ，突然意识到原来画一个饼图这么简单呀，有点打算也学学使用 mermaid 来画图了

饼图

最简单也最实用的图了

基本语法

• 绘制饼图由一个 pie 关键字开始

• 接下来是一个 title 关键字用以指明饼图的名称，注意这是可选的，可以缺省

• 接下来是数据填写

  • 用双引号 " "​ 包围一个区块的标签.
  • 标签后面通过分号 :​ 隔开
  • 分号的后面跟上一个正数（最多支持两位小数）

pie
    title 电影
    "喜剧" : 38
    "恐怖片" : 85
    "动作片" : 100
    "音乐剧" : 15

图例是默认的，颜色是随机的，按顺时针方向由占比大向占比小排列各扇形组分

在 mermaid 中改主题

主题只有'default', 'forest', 'dark', 'neutral', 'base'几种，添加语法如下：

%%{init: {'theme': 'default' } }%%
%%{init: {'theme': 'neutral' } }%%
%%{init: {'theme': 'forest' } }%%
%%{init: {'theme': 'dark' } }%%
%%{init: {'theme': 'base' } }%%

示例

‍```mermaid
%%{init: {'theme': 'base' } }%%
pie
    title 电影
    "喜剧" : 38
    "恐怖片" : 85
    "动作片" : 100
    "音乐剧" : 15
‍```

颜色配置

‍‍‍‍‍‍```mermaid
%%{init: {"pie": {"textPosition": 0.8}, 'theme': 'base', 'themeVariables': { 
"pieOuterStrokeWidth": "5px",
'pie1': '#FFFFFF', 'pie2': '#FFFF00', 'pie3': '#00FF00', 'pie4': '#0000FF', 'pie5': '#800080', 'pie6': '#ff0000', 'pie7': '#FFA500'}}}%%
pie
 	title 自定义颜色
	"White" : 5
	"Yellow" : 20
	"Green" : 30
	"Blue" : 10
	"Purple" : 10
	"Red" : 20
	"Orange" : 5
‍‍‍‍‍‍```

流程图

基本语法

‍```mermaid
graph TB
    	A[把大象放进去] --> B{"冰箱小不小？"}
    	B -->|不小| C[把冰箱门关上]
   	B -->|小| D[换个大冰箱]
‍```

颜色配置

在 graph 中可以通过 style 关键字配置边框样式，包括填充颜色、边线颜色、边线实虚等等。可参考 CSS 样式表。

同样，可以通过 classDef 关键字对样式进行统一配置

‍```mermaid
graph TB
	classDef default fill: #f9a, stroke: #333, stroke-width: 4px;
    	A[把大象放进去] --> B{"冰箱小不小？"}
    	B -->|不小| C[把冰箱门关上]
   	B -->|小| D[换个大冰箱]
‍```

参考

• Mermaid 官方文档：Tutorials | Mermaid
• Mermaid 在线编辑器：https://mermaid-js.github.io/mermaid-live-editor
• Markdown 进阶技能：用代码画流程图（编程零基础也适用） - 知乎 (zhihu.com)