Mermaid.js でフローチャートをつくる
最近仕事の関係でフローチャート的なものを手軽に作る方法を調べていまして， Mermaid 記法にたどり着きました。
普段 Obsidian など Markdownベースでメモを書いたりブログの記事を下書きしている自分にとって，テキストベースの情報のみでフローチャートを作成できるというのはなかなか革新的でした。
記法もシンプルで，1時間ほどいじっていたらそれなりに理解できますし，複雑なフローも作成できてしまいます。ちょっとした診療ガイドの下書きとか，引き継ぎ情報を作る時だとか，使える場面は色々あるなあと。テキストだけよりもフローチャート付きで示した方が情報伝達は非常に効率的になりますからね。
医師のキャリアフローチャート
そんなこんなで勉強がてら「医師のキャリア」フローを作成してみました。
以下のような図がサクっとできてしまいます（▼）。
医師キャリアその1（縦方向）
医師キャリアその2（横方向）
これらの画像は .pngで出力したものですが，実際にはテキストベースになっています。Mermaid 記法に対応したテキストツール上でテキストを編集すれば，リアルタイムにフローチャートが編集できます。
Obsidian や Visual Studio code などマークダウンに対応したアプリに対応プラグインを入れればプレビューできるようになりますし，Notionも対応しています。
ChatGPTでも適当なプロンプトを入れて「Mermaid 記法で出力して」といえばコードを吐いてくれます。これ精度が高くなったらめちゃくちゃ便利だと思うのですが，残念ながら日本語を含む指示だと自分がテストした2023年4月時点では極めて単純なものしかできませんでした。進化を待ちたいと思います…🧘
ソースコード
特に需要もないと思いますが，上記画像のコードを晒します。途中で追記した部分もあり少し汚くなっていますが…😅
以下のサイトで実際にコードを打ち込むと，フローチャートが確認できますので，是非！
医師キャリア1（縦向き）の Mermaid 記法コード
stateDiagram-v2
初期研修終了-->行政・公的機関
初期研修終了-->王道:とりあえずJISマーク
初期研修終了-->足の裏の米粒:基礎研究ガチ勢
初期研修終了-->フリー道:QOL極振り
初期研修終了-->ハイブリ道:異端児・風雲児
初期研修終了-->地域道
王道-->ハイブリ道
王道-->地域道
王道-->行政・公的機関
王道-->フリー道:仕事選びやすい
王道-->足の裏の米粒
王道-->指導医道
足の裏の米粒-->指導医道
足の裏の米粒-->アカデミア:心臓を捧げろ
フリー道-->地域道
地域道-->フリー道
ポスドク-->指導医道
ポスドク-->フリー道
state 王道
{
direction TB
専攻医-->専門医:3-6年で試験
}
state 指導医道
{
direction TB
指導医-->科部長
}
state 足の裏の米粒
{
direction TB
限界大学院生-->Ph.D.
}
state 行政・公的機関
{
direction LR
医系技官-->医務技監
保健所
}
state ハイブリ道
{
direction LR
海外臨床
企業
}
state アカデミア
{
ポスドク-->助教:ポスト得られたら
助教-->講師
講師-->准教授
准教授-->教授
}
state フリー道
{
direction LR
バイト-->非常勤
非常勤-->バイト
}
state 地域道
{
direction LR
開業医
僻地離島
}
医師キャリア2（横向き）の Mermaid 記法コード
flowchart LR
A{"初期研修終了\n〈26歳~〉"}
B(専攻医)
C{専門医試験}
D("専門医\n〈アラサー〉")
E("指導医\n〈アラフォー〉")
G["科部長 @市中病院"]
I(博士 Ph.D.)
J("ポスドク/客員研究員\n（限界医局員）")
K(助教)
L(講師)
M(准教授)
N(教授)
O("無給医\n（限界）大学院生")
subgraph id1 ["王道 〜JISマーク取得道〜"]
direction LR
B== "3~6年" ==> C
C==>D
subgraph id3 [指導医道]
direction LR
E-.-G
end
end
subgraph id2 [地域道]
direction LR
開業医
僻地\n離島
end
subgraph id4 [フリー道]
direction LR
非常勤-.-バイト医
end
subgraph id5 ["アカデミア ~心臓を捧げろ~"]
I-->J
J-->|熾烈なポジション争い|id7
subgraph id6 [足の裏の米粒]
O-->I
end
subgraph id7 [深海]
direction LR
K-->L-->M-->N
end
end
subgraph id8 ["行政・公的機関"]
direction LR
医系技官-.->|登り詰めた先|医務技監
保健所
end
subgraph id9 [なんかスゴい道]
Y[企業]
Z[海外臨床]
end
A==>B
A-.->id2
A-.-|QOL極振り|id4
A-.->|"ガチデミア基礎研究ルート"|id6
A-.->id8
A-.->|"異端児・風雲児"|id9
D-->id6
D-->E
I-->E
id1-.->id2
id1-.-id9
id1-.-id4
id2-.-id4
id4-.-id5
id5-.->id2
id5-.-id8
id5-.-id9
文法はこちら
皆さんもフローチャート描きたいときにオススメです。
細かい flowchart 記法は以下で確認することができます。
- stateDiagram:https://mermaid.js.org/syntax/stateDiagram.html
- flowchart :https://mermaid.js.org/syntax/flowchart.html