mermaid記法とは？初心者にもわかる使い方と基本図の作り方共起語・同意語・対義語も併せて解説！

この記事を書いた人

高岡智則

年齢：33歳性別：男性職業：Webディレクター（兼ライティング・SNS運用担当）居住地：東京都杉並区・永福町の1LDKマンション出身地：神奈川県川崎市身長：176cm 体系：細身〜普通（最近ちょっとお腹が気になる）血液型：A型誕生日：1992年11月20日最終学歴：明治大学・情報コミュニケーション学部卒通勤：京王井の頭線で渋谷まで（通勤20分）家族構成：一人暮らし、実家には両親と2歳下の妹恋愛事情：独身。彼女は2年いない（本人は「忙しいだけ」と言い張る）

mermaid記法とは？

mermaid記法はテキストベースの図作成言語です。Mermaidという名前で呼ばれることもあり、専門用語を覚えなくても図を描ける点が魅力です。Markdownなどのファイル内にそのまま図を記述でき、対応するリーダーやツールで図に変換されます。リポジトリのREADMEやブログ記事など、技術ドキュメントをより見やすくするのに役立ちます。

なぜ mermaid 記法を使うのか

テキストだけで図を作れるので、外部ツールや画像ファイルを別に管理する必要が減ります。バージョン管理がしやすく、変更履歴と図の差分が分かりやすい点もメリットです。

基本的な使い方

mermaid記法は、図の種類ごとに先頭にキーワードを置いて記述します。最初の行が図の種類を決め、以降の行がノードとエッジを表します。環境が整っていれば、エディタ上で即座に図をプレビューできます。

例: flowchart のコード例

flowchart TD

A[開始] --> B[処理]

B --> C[終了]

よく使う図の種類と記法の例

以下は代表的な図の種類と、簡単な記法の例です。実際には環境に合わせて語頭を変えることがあります。

図の種類	開始キーワード	用途
flowchart	flowchart TD / flowchart LR	手続きの流れを示す
sequenceDiagram	sequenceDiagram	時系列のやりとりを描く
classDiagram	classDiagram	クラスと関係を表す

実際に使うときの手順

1) Mermaid を使える環境を用意します。GitHub のリポジトリの READMEや、マークダウンエディタ、オンラインの Mermaid ビューアなどが便利です。

2) 図を描くコードを書きます。先頭行で図の種類を決め、続く行でノードとエッジを定義します。

3) 図を表示する場所に、適切なレンダリングを設定します。多くの環境では Mermaid.js が背景で動作します。

注意点と限界

Mermaidは初心者に優しい反面、複雑なダイアグラムを描く場合には限界があります。長すぎるコードは読みづらく、表示が崩れることもあります。図のサイズやスタイルは環境によって差が出る点に注意しましょう。

まとめ

mermaid記法はテキストベースで図を作れる便利なツールです。簡潔なコードで複数種の図を描けるため、技術ドキュメントの可読性を高めるのに最適です。はじめはflowchart などの基本から練習し、徐々に sequenceDiagram や classDiagram へと進めていくと良いでしょう。

mermaid記法の同意語

Mermaid記法: Mermaid.jsでダイアグラムを描く際の基本的な記法・構文。
Mermaid記述: Mermaidのコードを記述する方法・ルールのこと。
Mermaid言語: Mermaid.jsが理解する独自の記法・言語のこと。
マーメイド記法: Mermaid記法のカタカナ表記で、同じ意味を指します。
マーメイド記述: Mermaidのコードを書き表す方法・記述方法のこと。
mermaid.js記法: Mermaid.jsを使ってダイアグラムを定義する記法のこと。
Mermaid.jsの記法: Mermaid.js用の公式な記法・構文のこと。
Mermaidのシンタックス: Mermaidの構文（シンタックス）のこと。
Mermaid構文: Mermaidにおける記法の構造・ルールのこと。
Mermaidコード: Mermaidで用いるコード片・テキストベースの定義のこと。
Mermaidダイアグラム記法: Mermaidダイアグラムを定義するための記法のこと。
Mermaid描画記法: Mermaidを用いて図を描くための記法・表現方法のこと。

mermaid記法の対義語・反対語

手描き図解: Mermaid記法のテキストベースの図作成とは対極で、紙やホワイトボードに手で描く図解のこと。コードや記法を使いません。
画像図: 図をテキストベースの記法から生成せず、既に用意された画像ファイルとして扱う図のこと。
WYSIWYG図表エディタ: ドラッグ＆ドロップのGUIだけで図を作成するツールのこと。コード記述を一切必要としません。
文字だけの説明: 図を使わず、文章だけで情報を伝える説明方法のこと。
非コード型ダイアグラム: 図を描く際にコードを記述しない表現のこと。Mermaidのコードベースの記法と対比的です。
ドラッグ＆ドロップ式図作成: 直感的なGUI操作のみで図を作成する方法のこと。テキスト記法を使いません。
描画ソフトによる図形描画: VisioやIllustrator等の描画ソフトで図を描く伝統的な方法のこと。
口頭・文章中心の図解説明: 図を用いず、口頭や文章中心で関係性を説明するアプローチのこと。
既成画像としてのダイアグラム共有: 完成した図を画像ファイルとして共有する方法のこと。コード生成を介さない点が特徴です。

mermaid記法の共起語

flowchart: Mermaidの基本となる図種。手順や判断の流れを箱と矢印で表現します。初心者にも作成しやすく、他の図種の土台となります。
sequenceDiagram: 時系列での対話やイベントのやり取りを表す図。登場人物やオブジェクト間のメッセージの送受信順序を矢印で示します。
classDiagram: クラスとその属性・メソッド、継承関係を表す図。UMLに近い表現をMermaidで簡易に描けます。
stateDiagram: 状態遷移を可視化する図。イベントに応じてどの状態へ移るかを矢印で示します。
erDiagram: エンティティと属性、関係を表すER図。データベース設計の要素を整理するのに適しています。
gantt: タスクのスケジュールを横棒で示すガントチャート。開始日と終了日、進捗を視覚化します。
pie: 円グラフで全体に対する要素の割合を示します。比率の比較が一目で分かります。
journey: 顧客やユーザーの体験を時系列で追う旅路図。ペルソナの接点や感情の変化を表現します。
mindmap: 中心テーマから枝分かれするマインドマップ。思考やアイデアを階層的に整理できます。
timeline: 出来事の時系列を横並びで示すタイムライン図。イベントの順序と期間感を直感的に把握します。
requirementDiagram: システムの機能要件や関係を整理する図。要件間の関連を可視化します。
mermaidJS: Mermaid本体のライブラリ。ウェブページ上で図をレンダリングするJavaScript実装です。
mermaidCLI: Mermaidをコマンドラインから利用するツール。mmdcコマンドでSVGやPNGを生成します。
mmdc: Mermaid CLIの実行コマンド名。設定と入力ファイルから図を出力する際に使います。
markdown: 図をMarkdown文書内に埋め込む基本的な方法。コードブロックの言語をmermaidにするのが一般的です。
codeBlock: コードブロックはMarkdown内の図記法を囲む枠組み。言語指定を使ってMermaidを有効化します。
Notion: NotionのドキュメントでもMermaid記法を使って図を表示できます。対応環境では埋め込みが容易です。
GitHub: GitHubのリポジトリやREADMEでMermaidを利用して図を共有できます。
VSCode: Visual Studio Codeの拡張機能でMermaidのプレビューと編集が快適になります。
mermaidPreview: Mermaidのプレビュー機能を提供する拡張や機能の総称。エディタ内で図を素早く確認できます。
SVG: Mermaidの出力形式の一つ。ウェブ上で解像度を落とさず拡大できるベクター形式です。
PNG: 出力形式の一つ。ビットマップ画像として広く共有できます。
Docusaurus: DocusaurusのドキュメントサイトでMermaidを用いて図を埋め込むのが一般的です。
MkDocs: MkDocsによる静的サイトでもMermaidを使えるように設定するケースが多いです。

mermaid記法の関連用語

mermaid記法: Mermaidが採用するテキストベースの図表記法。ノードとエッジの関係性を記述し、マークダウンやドキュメント内で図を生成するための入力形式です。
Mermaid.js: Mermaidの描画エンジンとなるJavaScriptライブラリ。テキスト記法を受け取り、ウェブ上で図を描画します。
flowchart: 最も一般的な図の種類。ノードを矢印でつなぎ、プロセスの流れや手順を表現します。
graph: Mermaidの基本的なグラフ表現。direction指定と組み合わせて、Flowchart以外の図も描けます。
TD: Top-Downの略。フローの描画方向を上から下へ設定します。
LR: Left-Rightの略。左から右へ描画する方向指定です。
TB: Top-Bottomの略。垂直方向に描画します。
RL: Right-Leftの略。右から左へ描画します。
sequenceDiagram: 時系列のやり取りを表す順序図。登場人物同士のメッセージの流れを矢印で示します。
classDiagram: クラス図。クラス名・属性・メソッド・継承関係などを表現します。
stateDiagram: 状態図。状態と遷移を矢印で表現し、システムの挙動を設計します。
erDiagram: ER図。エンティティとリレーションをデータ設計の観点で表します。
gantt: ガントチャート。タスクの開始日・期間・依存関係を横棒で可視化します。
pie: 円グラフ。全体に対する割合を円で表現します。
journey: ジャーニー図。ユーザーの体験や行動の流れを時系列で追います。
subgraph: サブグラフ。大きな図を小さなグループに分割して整理します。
ノード: ダイアグラムの基本要素。情報やオブジェクトを表す点・矩形などの表現単位です。
エッジ: ノード間を結ぶ線。関係性・遷移・結びつきを示します。
direction: 描画の方向指定を行う設定。TD/LR/TB/RLなどの値を使います。
style: ノードやエッジの見た目を調整するスタイル指定。色・形・太さなどを設定します。
linkStyle: エッジのスタイルを個別に細かく設定するオプション。
class: クラス図で使うクラスの定義。属性・メソッド・関係を示します。
mermaidAPI: Mermaidをプログラムから操作するためのAPI。図のレンダリング制御や設定変更が可能です。
公式リファレンス: Mermaidの公式ドキュメント。各記法の仕様やサンプルがまとまっています。