JavaScriptベースの図表作成ツール。Markdown風のテキスト定義をレンダリングして、図表を作成。 [[Obsidian]]では、Mermaidを利用してノート内に図表を追加できる。[flow charts](https://mermaid.js.org/syntax/flowchart.html)、[sequence diagrams](https://mermaid.js.org/syntax/sequenceDiagram.html)、[timelines](https://mermaid.js.org/syntax/timeline.html)など、さまざまな図表を描くことができる。 図表作成には[Mermaid Live Editor](https://mermaid.live/)の併用がオススメ ## 作例 ````md ```mermaid quadrantChart title Reach and engagement of campaigns x-axis Low Reach --> High Reach y-axis Low Engagement --> High Engagement quadrant-1 We should expand quadrant-2 Need to promote quadrant-3 Re-evaluate quadrant-4 May be improved Campaign A: [0.3, 0.6] Campaign B: [0.45, 0.23] Campaign C: [0.57, 0.69] Campaign D: [0.78, 0.34] Campaign E: [0.40, 0.34] Campaign F: [0.35, 0.78] ``` ```` ```mermaid quadrantChart title Reach and engagement of campaigns x-axis Low Reach --> High Reach y-axis Low Engagement --> High Engagement quadrant-1 We should expand quadrant-2 Need to promote quadrant-3 Re-evaluate quadrant-4 May be improved Campaign A: [0.3, 0.6] Campaign B: [0.45, 0.23] Campaign C: [0.57, 0.69] Campaign D: [0.78, 0.34] Campaign E: [0.40, 0.34] Campaign F: [0.35, 0.78] ``` ## 参考 - [Advanced formatting syntax / Diagram - Obsidian Help](https://help.obsidian.md/Editing+and+formatting/Advanced+formatting+syntax#Diagram) - [Mermaid.org](https://mermaid.js.org) - [Mermaid Live Editor](https://mermaid.live/)