#author("2026-03-28T18:48:59+09:00;2026-03-28T18:47:43+09:00","default:inoue.ko","inoue.ko") #author("2026-03-28T18:49:11+09:00;2026-03-28T18:47:43+09:00","default:inoue.ko","inoue.ko") *Mermaid記法 ~ Mermaid記法とは、テキストから図を自動生成するためのコーディング記法です。Mermaidは単なる「図解ツール」ではなく、「思考を構造化して、AIやチームと共有するための言語」へと進化しています。 ~ ~ **Mermaid記法とは何か Mermaid（マーメイド）は、__[[Markdown]]__のようなテキスト形式でグラフや図を描画するための__[[JavaScript]]__ライブラリ、およびその構文のことです。 通常、フローチャートやシーケンス図を作成するには専用のデザインソフトや描画ツール（VisioやPowerPointなど）を使いますが、Mermaidであれば、コードを書くだけで済みます。 ~ ***注目されている理由 -メンテナンスが楽 画像ではないので、コードを書き変えるだけで図の更新ができる。 -Gitとの相性が良い テキストデータなので GitHub や Notion などで差分を管理しやすい。 -学習コストが低い 「A --> B」と書けば矢印が引ける・・など直感的で覚えやすい。 ~ ~ **コードサンプル Mermaidの中で最もよく使われるフローチャートを例に、実際のコードを紹介します。記述のルールは非常にシンプルです。 ~ ***基本的な構成要素 graph TD：図の方向（上から下）を指定 graph LR：図の方向（左から右）を指定 [ ]：四角いノード（工程） { }：ひし形のノード（条件分岐） (( ))：丸いノード（開始/終了など） -->：矢印（流れ） ~ ***サンプルコード 判断分岐を含むフローチャートの事例 #image(FlowChart.png,right,30%); graph TD A(朝起きる) --> B[顔を洗う] B --> C{眠いですか？} C -- 眠い --> D[コーヒーを入れて飲む] C -- 眠くない --> E[執筆をはじめる] D --> E E --> F(完了) #clear ~ ~ **作図ツールと手順 Mermaidは一般に普及しているため、専用ソフトをインストールしなくても、普段使っているツールでもそのまま動きます。またコード記法を覚える必要もなく、生成AIを用いてプロンプトから状況をうまく説明できれば、作図の元となるコード自体が生成されます。 -生成AI（ChatGPT / Gemini など） 「以下の内容をMermaid記法で出力して」と頼むとコードが生成されます。 -__[[Mermaid Live Editor>https://mermaid.live]]__ 公式サイトのブラウザエディタ。図の生成を即試すことができます。 図は、PNG形式やSVG形式で保存可能です。 -VS Code拡張機能 「Markdown Preview Mermaid Support」を入れると、プレビュー画面でリアルタイムに図を確認できます。 -Notion /mermaid と入力してブロックを作成し、コードを貼り付けるだけで即座に図が表示されます。 -GitHub .md ファイル内で「```mermaid」と「 ```」で囲むだけで、リポジトリ上で自動レンダリングされます。 ~ ~ **生成AI時代の Mermaid記法 今、Mermaidが改めて注目されている最大の理由は「AIとの相性が抜群に良い」からです。 -AIが「描画」できる共通言語： AIは画像を直接ゼロから正確に描く（文字化けせずにフローを作るなど）のはまだ苦手ですが、「論理的なテキスト」を書くのは得意です。Mermaidを介することで、AIに正確な図解を指示できます。 -プロンプトによる一括修正： 「このフローに『承認ステップ』を追加して」とAIに頼めば、AIがMermaidコードを書き換えてくれます。マウスで図の矢印を引き直す手間がゼロになります。 -トークン効率が良い： 画像データを読み込ませるよりも、軽量なテキストであるMermaidコードを読み込ませる方が、AIは構造を正確に理解し、論理的なミスを指摘しやすくなります。 ~ ~ **APPENDIX Mermaidを使いこなす上で知っておくと便利なキーワード -__[[Markdown]]__ Mermaidが埋め込まれるベースとなる文書形式。エンジニアの標準的記法 -Text-to-Diagram 「文字から図を作る」という考え方そのもの。Mermaidはその代表格 -PlantUML： Mermaidと同様の存在。より複雑で高度な図が書けます（環境構築は難） -__[[SVG]]__（Scalable Vector Graphics）： Mermaidが生成するグラフィックデータの形式（ベクトルデータ） ~ ~