【Mermaid記法】でのフローチャート作成が便利（コードあり）

Mermaid.js でフローチャートをつくる

仕事の関係でフローチャート的なものを手軽に作る方法を調べていまして、 Mermaid 記法にたどり着きました。

– https://mermaid.js.org/

要するにテキスト情報のみでフローチャートを作成できる言語なのですが、なかなか革新的です。

記法もシンプルで1時間ほどいじっていたらそれなりに理解できますし、複雑なフローも作成できてしまいます。ちょっとした診療ガイドの下書きとか、引き継ぎ情報を作る時だとか、使える場面は色々あるなあと。テキストだけよりもフローチャート付きで示した方が情報伝達は非常に効率的になりますからね。

医師のキャリアフローチャート

そんなこんなで勉強がてら「医師のキャリア」フローを作成してみました。以下のような図がサクっとできてしまいます（▼）。

医師キャリアその1（縦方向）

この内容を解説した記事

可能性は無限大？！医師のキャリアパスについてノー忖度で語り尽くす

この記事では医師のキャリアパスについてまとめてみたいと思います。 注）この記事はネタと誇張を過分に含んでいます。じゅ…十分ご理解いただいた上でお読みください。お願いします。 医師のキャリアパス 研修医のみんな！これがアナタたちを待[…]

医師キャリアその2（横方向）

これらの画像は .pngで出力したものですが、実際にはテキストベースになっています。Mermaid 記法に対応したテキストツール上でテキストを編集すれば、リアルタイムにフローチャートが編集できます。

Obsidian や Visual Studio code などマークダウンに対応したアプリに対応プラグインを入れればプレビューできるようになりますし、Notionも対応しています。

ChatGPTでも適当なプロンプトを入れて「Mermaid 記法で出力して」といえばコードを吐いてくれます。これ精度が高くなったらめちゃくちゃ便利だと思うのですが、残念ながら日本語を含む指示だと自分がテストした 2024年 時点ではまだ単純なものしかできませんでした。進化を待ちたいと思います…🧘

ソースコード

特に需要もないと思いますが、上記画像のコードを晒します。途中で追記した部分もあり少し汚くなっていますが…😅

以下のサイトで実際にコードを打ち込むと、フローチャートが確認できますので、是非！

– https://mermaid.live/edit

医師キャリア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{"初期研修終了 <br>〈26歳~〉"}
B(専攻医)
C{専門医試験}
D("専門医 <br>〈アラサー〉")
E("指導医 <br>〈アラフォー〉")
G["科部長 @市中病院"]
I(博士 Ph.D.)
J("ポスドク/客員研究員 <br>（限界医局員）")
K(助教)
L(講師)
M(准教授)
N(教授)
O("無給医 <br>（限界）大学院生")

    subgraph id1 ["王道 〜JISマーク取得道〜"]
    direction LR
    B== "3~6年" ==> C
    C==>D
        subgraph id3 [指導医道]
        direction LR
        E-.-G
        end
    end

    subgraph id2 [地域道]
    direction LR
    開業医
    僻地/離島
    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