【Mermaidコードであれば即時に美しい図をコードで書いて複数人で共有できます】

「図ならエクセルで描けばいいのでは？」そう思った方もいるかもしれません

もちろんエクセルでも図は描けます

ただ、“図を共有しながら議論したい場面” を想像してみてください。

必ずしもホワイトボードがそばにあるとは限りません

仮にホワイトボードがあったとしても、ボードに書いた図はどうしますか？

その場でスマホで撮影したとします

後で、スマホで撮影した画像はエクセルで製図し直しますか？

Mermaidコードならばその場で図を共有できます

ここで「コードで書く」というメリットについて概要を解説したいです

Mermaidは「コードで図を書く」ため、生成AIとの相性が抜群です

図を画像として扱うより、コードとして扱った方がAIが正確に理解し、修正も容易です

例えば「この図の矢印だけ太くして」「この条件分岐を追加して」といった指示が、

コードなら一瞬で反映できます

場合によっては、図を作成したコードからプログラミングコードを作成することもできます

Mermaidコードは最強のプロンプトという言い方もできるかも知れません

今回の記事では、Mermaidコードでフローチャート図を作成する方法を解説します

ここで、

これ、「わざわざコードの書き方を覚えなくてはいけないの？」と思った方もいらっしゃるかもしれません

大丈夫です

Mermaidコードは暗記するものではありません

必要なときにテンプレートを変更したり、生成AIに聞いたりするだけでも十分です

その辺りは力を抜いて記事を読んでもらえればと思います

ただ、覚えておくと便利なのは間違いありません

この記事が向いている人

• 業務フローをわかりやすく共有したい人
• Excel や PowerPoint の図作成に時間を取られている人
• 生成AIを使って業務効率化したい人
• チームで図を共有し、差分管理したい人
• プログラミングや自動化に興味がある人
• 内部統制・業務改善・DX推進に関わる人

この記事を読むとできるようになること

• Mermaidコードで基本的なフローチャートを描ける
• 図形（開始・処理・条件分岐・入出力）の使い分けが理解できる
• 矢印の種類やテキストの入れ方がわかる
• 条件分岐とループ処理をコードで表現できる
• 図形の色やスタイルを変更できる
• 生成AIに「図を修正して」と依頼できるようになる

そもそもMermaidコードとは？

Mermaidは、テキストを書くと、ブラウザ上で自動的に図を生成してくれるオープンソースの作図ツールです

従来の エクセルや PowerPoint での図作成には、次のような課題がありました：

• 図の修正に時間がかかる
• レイアウト調整が面倒
• 画像ファイルは差分が見えない
• バージョン管理が難しい

Mermaidはこれらを**「テキストで書く」**というアプローチで解決します。

Mermaidコードを利用できるツールはVSCode、krokiなど様々です

今回の記事ではMermaid.jsを使用します

Mermaid.js は、コードから図を生成できるサイトです

図の修正や共有がスムーズに行えるのが特徴です

ちなみになのですが、Notionでも簡単にMermaidコードが使えるので個人的にはかなり重宝しています

フローチャート図とは

業務や処理の流れを、誰が見ても理解できるように図で表したもの。
開始 → 処理 → 判断 → 結果 という一連の流れを、図形と矢印で表現します

フローチャートが使われる典型的な場面

• 業務フローの説明
• システム処理の流れ
• アルゴリズムの可視化
• 手順書・マニュアル
• トラブルシューティングの分岐

フローチャートの基本要素

• 長方形：処理
• ひし形：条件分岐（Yes/No）
• 平行四辺形：入力・出力
• 丸・角丸：開始・終了
• 矢印：流れ

これらを組み合わせて、流れを直感的に理解できるようにします

特に他の図に比べて「条件分岐」が複雑に存在する業務などの説明に優れています

基本を学ぶ：開始と終了のフロー図を描いてみる

この章では、開始と終了を描くことでフローチャート図の基本（フローチャート図の宣言、図の描き方、矢印の書き方）を学びたいと思います

前述したように、すべて一からコードを書くのではなくサンプルコード（テンプレート）を修正していきましょう！

サンプルコードの表示

下の画像がMermaid.jsのトライアル画面です

左上にコードが少し見えていて、画面右にフローチャート図が見えいています

ここで「Sample Diagrams」の箇所を下にずらしてみましょう！

上の図の矢印をクリックすると「Sample Diagrams」の欄が下がります

これで、画面右に表示されているフローチャート図の中身のコードが分かります

サンプルコードの中身

ちなみに画面右のフローチャート図と上のコードとを対比すると、おぼろげながらコードの中身が分かってくると思います

ここで少し詳細にコードの中身を2行だけ解説してみたいと思います

1行目：flowchart TD

まず「flowchart」はそのままです

この1行目で「flowchart」と宣言することで、以降はフロチャートを描くという意味になります

これがclassDiagramという宣言であればクラス図を描くという意味になります

次に「TD」という宣言の意味ですが、これはTop→Downの方向で図を描くという意味になります

ですから、下の図のように左から右に図を描きたい場合はLRと宣言することになります

2行目：A[Christmas] –>|Get money| B(Go shopping)

A[Christmas]

こちらを２つに分解すると[]で四角の図形を描いています

そして[]の中に文字列を挿入することで図形の名称が分かるようになります

さらに一番最初に来る「A」についてです

これは後で[Christmas]の図形を使いまわせるように略称をつけています

こちらはＢの箇所で詳細を解説します

–>|Get money|

–>で矢印を描いています

||は矢印の解説テキストです

3行目：B(Go shopping)

このＢは図の略称です

そして()の(の組み合わせで丸みのある図形を描いています

この略称のＢを使用して「Go shopping」の図形を一文字で表します

B –> C{Let me think}

上のコードに対応するフローチャート図は、以下の画像の赤字の箇所になります

実際に開始と終了のフローチャート図を描く

前置きが長くなりました

実際に開始と終了を描いていきましょう

まず、最初に3行目以降のコードを消しましょう

すると、上の図の右側のように２つの図形だけに絞り込まれます

ここから、|Get Money|の文字列は2行目から削除しましょう

A[Christmas] –> 消す！B(Go shopping)

これでフローチャート図は以下のようになります

最後に図形の中の文字列を書き換えましょう

A[開始] –> B(終了)

これで開始と終了を描いたフローチャート図ができあがりました

エラーになった場合

文法的にコードが間違っている場合は、下の画像のように該当箇所が赤字になります

上の図では[]の組み合わせの]が欠けています

ですので、画像の下で該当箇所が示されています

上の画像では黄色の箇所です

エラーを自力で直せない場合は、生成AIに聞けばすぐに治ります

図形の種類

図形の種類の指定の仕方は大きく分けて２つに分かれています

1つ目の方法は文字で図形種類を指定する方法、2つ目は文章で種類を指定する方法です

ますは1つ目の文字で図形種類を指定する方法から解説します

図形の種類はかなり多いですが、角ブロックの四角と条件分岐処理用のひし形が描けるだけでも8割はOKだと思います

文字で図形種類を指定

基本的には(や[、{、<などの記号を組み合わせて図形の種類を表現します

以下、主要なもののみ紹介します

角ブロック：[]

丸みブロック：()

角丸長方形：([])

長方形/サブルーチン・保存：[[]]

円柱形/データベース：[()]

円：(())

正方形/条件分岐・判断：{}

非対称図形/強調、注釈：>]

平行四辺形/入出力：[//]

文章で指定

基本的に@{}の中に指定する図形の文章を入れます

この方法の方が、特殊なものは覚えやすい（後で調べやすい）かもしれません

文法的には「@{ shape: 図形種類, label: “図の中に入れるテキスト”}」のような形になります

以下、一部紹介します（上記・文字で指定にて紹介した内容もこの方法で指定可能です）

ファイリング：manual-file

複数ドキュメント：docs

クラウド:Cloud

条件分岐：diamond

注意点

文章で図形の種類を指定する場合は、空白にご注意ください

上の図のように黄色の箇所に「空白」半角で1文字詰まっていないと思ったような図形になりませんのでご注意ください

以上、

Mermaidコード用意した数多くの図形種類の中から抜粋して紹介しました

もっと詳細に知りたい方はMermaid.jsのドキュメントコーナーをご覧ください

矢印（線）種類とテキストの入れ方

-=もしくは>などの記号を組み合わせて描きます

１．通常（矢印付き）

テキストを入れる場合

-がテキストを挟んで２つづつになっていることにご注意ください

もしくは||を使用します

２．矢印なし

>の記号なしで-を３つで描きます

テキストを入れる場合

「-を２つ」と「-を３つ」の中にテキストを入れます

もしくは||を入れます

３．点線

-.-と>で描きます

テキストを入れる場合

2つ目の.を登場させ、２つの.でテキストを挟む形になるので注意が必要です

４．太線

==と>で描きます

テキストの入れ方は１．通常と同様です

５．線なし

~~~で描きます

６．そのほか。線の終点種類を変更する

>の代わりにｘ（Ｘ）を使用することでバツを終点にすることができる

複数の図形を組み合わせてフローチャート図を書く

それでは実際に複数の図形、線を組み合わせて見ましょう！

一方通行

横に異なる図形を並べると下の画像のように、一方通行のフロー図になります

ちなみに、TDやLRなどの「図形の方向」を省略すると、上の画像のようにした方向にフローチャート図がながれます

枝分かれ

同じ起点（今回はA）から複数行を違う箇所に向けてフローチャート図を描くと、下の図のようにAから枝分かれのフローチャート図になります

枝分かれになったフローチャート図をまた一か所にまとめる場合は、複数行を同じ個所に向けてフロー図を描きます

ちなみに同じ起点、同じ向け先の場合は以下のように＆を使うこともできます

条件分岐処理を使用した実践的な内容

フローチャート図の一番の醍醐味は「条件分岐（判断）」です

条件分岐処理を使えば、同じ処理を繰り返すループ処理も表現することができます

以下ではごくありふれた日常的な動作を、条件分岐処理を使用することでシンプルに表現した内容に取り組んでいただきます

簡単だけど、とても実践的な内容になっていると思います

内容

新聞を郵便受けに取りに行くという内容です

ただ新聞が到着する時間がわかりません

郵便受けに行き「新聞が来ているかチェック」します

このチェックがOKかどうかで、処理が分岐します

新聞が来ていなければ「5分」待ち、郵便受けに取りに行きます

この処理を「新聞が来ている → OK」になるまで繰り返します

ポイント

条件分岐（{}で表現された図形）の後、「はい」「いいえ」を下の図のように矢印内に入れるのがポイントです

そうすれば下の図のように、処理が分岐していることを描くことができます

実際の内容

コードは次の通りとなります

flowchart TD

    Start([開始]) --> CheckBox[郵便受けを見る]

    CheckBox --> HasNews{新聞は来ている？}

    HasNews -- はい --> End([終了])

    HasNews -- いいえ --> Wait[5分待つ]

    Wait --> CheckBox

出来上がったフローチャート図は以下の通りです

その他

サブグラフ（図形内の図形）

Mermaid.jsでは、図形の中に図形を入れることもできます

この場合は、一つの図形にまとめたいコードを「subgraph ~ end」でくくります

subgraph 条件分岐処理    
HasNews -- はい --> End([終了])    
end

この時、subgraphには下の画像のように、図形に名前を付けましょう

図形の色・罫線の太さなど

図形の色（背景：fill、罫線、文字）や罫線の太さも指定はできます

%% ▼ 色の定義
    classDef orange fill:#FFA500,stroke:#333,stroke-width:1px,color:#000;
    classDef blue fill:#87CEFA,stroke:#333,stroke-width:1px,color:#000;

    %% ▼ ノードに色を適用
    class CheckBox orange;
    class Wait blue;

上のコードのように「classDef」でorangeやblueのように定義・宣言します

この定義・宣言した内容を各図形に適用するという内容です

ここでいろんな英語がでてきますが、各内容は以下の通りです

ちなみに%%でコメントアウト（コードの無効化）ができるようになっています

この辺りは生成AIに頼った方がベターだと思います

画像などのへの出力

作成したフローチャート図は画像で出力することができます

別途、コードはメモ帳などでバージョン管理するのがおすすめです

絵文字

図形の中に絵文字を使うのは、個人的にはとてもわかりやすくていいと思います

PC画面左下のWindowsマークと.を押せば絵文字を選べるようになります

絵文字を使えば、一目で情報を識別できる可能性が高まります

ただこれは個人の趣味や、職場の雰囲気にもよりますね・・・

＜まとめ＞

今回の記事ではMermaidコードでフローチャート図を作成する方法を解説しました

様々な内容を解説しましたが、とにかく次の内容ができれば形になります

• [や(などの括弧を使用して図形を描く
• –や>を使用して→を描く
• ||で矢印内にテキストを入れる

コードで図を書くことができれば、生成AIへの指示も変わってきます

AI時代だからこそ、DXを推進することを仕事をしている人にはぜひ覚えて頂きたい技術です！

このブログでは他の図の描き方も解説しています

ぜひご参考にしてみてください ⇒詳細

にほんブログ村

にほんブログ村

にほんブログ村

にほんブログ村