Mermaid.jsを使いたい
Markdown的な使い方でフローチャートやガンチャートを表現できる
以下のような感じで表現できる。
graph LR A --- B B-->C[fa:fa-ban forbidden] B-->D(fa:fa-spinner);
graph LR
A --- B
B-->C[fa:fa-ban forbidden]
B-->D(fa:fa-spinner);
ガンチャート
gantt title PHPのライフサイクル section PHP 7.2 アクティブサポート : done, 2017-11-30, 110d セキュリティサポート : crit, 2020-11-30 section PHP7.3 アクティブサポート : 2018-12-06, 2020-12-06 セキュリティサポート : crit, 2021-12-06 section PHP7.4 アクティブサポート : 2019-11-28, 2021-11-28 セキュリティサポート : crit, 2022-11-28
gantt
title PHPのライフサイクル
section PHP 7.2
アクティブサポート : done, 2017-11-30, 2019-11-30
セキュリティサポート : crit, 2020-11-30
section PHP7.3
アクティブサポート : 2018-12-06, 2020-12-06
セキュリティサポート : crit, 2021-12-06
section PHP7.4
アクティブサポート : 2019-11-28, 2021-11-28
セキュリティサポート : crit, 2022-11-28
マインドマップもできるの??
mindmap top idea1 長野 idea3 信州 安曇野 伊那 テスト さらにテスト
mindmap
top
idea1
長野
idea3
信州
安曇野
伊那
テスト
さらにテスト
シーケンス図
sequenceDiagram 花子-->>太郎: 良いですよ! 花子->>次郎: あなたはどうですか? 次郎-->>花子: とても良いです
sequenceDiagram
花子-->>太郎: 良いですよ!
花子->>次郎: あなたはどうですか?
次郎-->>花子: とても良いです
円グラフ
pie showData title 日本の人口 "巨人" : 42.96 "阪神" : 50.05 "ヤクルト" : 10.01 "中日" : 5
pie showData
title 日本の人口
"巨人" : 42.96
"阪神" : 50.05
"ヤクルト" : 10.01
"中日" : 5
とりあえず使い方メモ
リンク
【Mermaidの紹介】Qiitaでダイアグラム・チャートが簡単に書けるようになりました! mermaid.js で上流工程を好きになろう フローチャート図を書けるmermaid.jsを使ってみた Usage | Mermaid マーメイド#19 マインドマップ - Qiita