【マーメイド】
Mermaid とは？
最終更新:
💡 テキストを書くだけで図が浮かび上がる魔法のインク
Mermaidは、テキストで書いた図の構造を、フローチャートやシーケンス図などに描画するJavaScriptベースのツール。対応するMarkdown環境やエディターで利用し、元の記述をGitなどで管理できる。
📌 このページのポイント
ひよこ Mermaidって、テキストで図が描けるってどういうこと？
ペンギン先生 箱や矢印の関係を文字で書き、Mermaidがそれを図にするんだ。たとえばflowchart LRと図の向きを示し、A --> Bと書けば、AからBへ向かう矢印を表せるよ。
ひよこ フローチャート以外にも描けるの？
ひよこ Markdownに書けば、どこでも図になる？
ペンギン先生 利用先がMermaidの描画に対応している必要があるよ。GitHubならMarkdownファイルやIssue、PRなどで、mermaidという言語指定のコードブロックを使える。利用先の対応バージョンによって、使える記法が異なることもあるんだ。
ひよこ 画像を保存するのと何が違うの？
ペンギン先生 元の記述がテキストなので、Gitで変更箇所を比較しやすいよ。箱や矢印を追加したことを確認できる。ただし記述の差分だけでは図の重なりや読みやすさは分からないので、描画した結果も見よう。
ひよこ 細かいデザインにも向く？
ペンギン先生 テーマやスタイル、配置の設定はあるけれど、主に構造から図を描く道具だよ。文字の量を減らしたり図を分けたりして、読者が関係を追えるようにすることが大切。ピクセル単位で自由に配置したい場合は、図の編集ツールも選択肢になるね。
まとめ：ざっくりこれだけ覚えればOK！
「Mermaid」って出てきたら「テキストの記述から図を描くツール」と思えばだいたいOK！
📖 おまけ：英語の意味
「Mermaid」 ＝ 人魚
💬 Mermaidは英語で「人魚」。ツールでは、図の構造をテキストで表し、表示するときに図へ描画するよ。