仕事で使えるMermaid（マーメイド）入門 〜テキストから図を生み出す、生成AI時代の図解スキル〜

フローチャートは、処理を四角いボックス、条件分岐をひし形で表し、矢印で流れを示す図です。その読み方を、Mermaidで作った例で解説します。業務フローの整理、意思決定の可視化、マニュアルや手順書の作成といった活用場面を知り、分岐のあるプロセスを図にする場面を判断できるようになります。

Mermaid Live Editorでflowchart TDの宣言からフローチャートを書きます。使う記法は、角括弧の四角いノード、波括弧のひし形の条件分岐、矢印、パイプ記号で囲む矢印のラベルです。これらで、資料を確認して承認するか修正を依頼するかで分かれる流れを、戻りのループを含めて完成させます。TDをLRに変えて向きを変える方法も扱います。

ChatGPTを例に、経費申請から承認までのフローをMermaidのflowchart TD形式で生成させます。出力をMermaid Live Editorに貼り付け、形式、ノードのテキスト、条件分岐のつながりの3点を確認し、長いラベルの短縮や分岐の向きの修正を行います。AIの出力を叩き台として確認・修正する進め方が身につきます。

複数の参加者が時系列でやりとりする様子を表すシーケンス図を、顧客・ECサイト・決済システムの3者の例で解説します。読み方は、上から下へ時間が流れ、実線の矢印は依頼・送信、点線の矢印は返答・完了通知を表す、というものです。システム間の連携確認や部門間の承認フローなどの活用場面も学びます。

Mermaid Live EditorでsequenceDiagramの宣言からシーケンス図を書きます。participantで英字のIDとasに続く日本語名を定義する書き方、実線の矢印と点線の矢印の使い分け、コロンの後に書くメッセージを学び、顧客の注文から決済完了の通知までのやりとりを図にできるようになります。

ChatGPTを例に、社員・上長・経理部門の3者による経費申請フローをシーケンス図で生成させます。participantを英字のIDで書かせる指定をプロンプトに加える理由を学びます。確認するのは、IDの書き方、やりとりの順番、実線と点線の使い分けの3点です。実線になっている返答の矢印を点線に直すなどの修正もできるようになります。

中心のテーマから関連する要素を放射状に広げるマインドマップを、「スキルアップ計画」を4つのカテゴリに分けた例で解説します。ツリー構造で情報の階層を表す読み方と、アイデアの整理、全体構造の把握、企画やレポートのアウトライン作りといった活用場面を学びます。

Mermaid Live Editorでmindmapの宣言からマインドマップを書きます。中心ノードを二重丸カッコで円形にし、インデントの深さで階層を表す書き方を、「スキルアップ計画」の例で学びます。矢印を書かずにインデントだけで構造が決まること、インデントがそろっていないと図が崩れることも確認します。

ChatGPTを例に、新サービスの企画立案をターゲットや収益モデルなどの観点でマインドマップにまとめさせます。出力を階層構造と項目の粒度の2点で確認し、インデントやテキストを書き換えて直す方法を学びます。AIが作った図を見ながら、抜けている観点の枝を足していく使い方も紹介します。

複数のタスクを時間軸に沿って横棒で並べるガントチャートを、「Webサイトリニューアル」を企画・制作・公開の3つのフェーズに分けた例で解説します。どのタスクがいつ始まりいつ終わるかの読み方と、プロジェクト管理、進捗の可視化、締め切り管理といった活用場面を学びます。

Mermaid Live Editorでganttの宣言からガントチャートを書きます。dateFormat・tickInterval・axisFormatで日付の形式と横軸の目盛りを整え、sectionでフェーズを区切り、タスク名・開始日・期間でタスクを並べます。開始日を省くと前のタスクに続けて配置されることも確認します。

ChatGPTを例に、新規アプリのリリース計画をガントチャートで生成させます。日付と目盛りの設定をプロンプトで指定するコツと、AIが使うafterによる依存関係の読み方を解説します。確認するのは、設定の有無、日付の形式、タスクの順番と期間の3点です。期間などを手で調整できるようになります。

出来事を時系列に沿って1本の線の上に並べるタイムラインを、新規事業の立ち上げを4月から10月まで並べた例で解説します。タスクの期間を管理するガントチャートとの違いと、プロジェクトの経緯の共有、歴史や変遷の説明、ロードマップの提示といった活用場面を学びます。

Mermaid Live Editorでtimelineの宣言からタイムラインを書きます。titleでタイトルを付け、「時期:出来事」の形で行を並べる書き方と、時期を省いてコロンから書くことで同じ時期に2つ目の出来事を加える方法を、新規事業の立ち上げの例で学びます。

ChatGPTを例に、新製品のリリースまでのロードマップを四半期ごとのタイムラインで生成させます。構文がシンプルでAIの出力の精度が高いタイムラインの特徴と、時系列の順番、出来事の粒度の2点を確認する方法を学び、報告書やプレゼンで経緯や計画を示す図を素早く作れるようになります。

ユーザーが体験する一連の行動と、場面ごとの満足度を合わせて表すユーザージャーニーを、オンラインショッピングの体験を4つのフェーズに分けた例で解説します。1から5のスコアで満足度の高低を読む方法と、顧客体験の可視化、課題の特定、改善施策の検討といった活用場面を学びます。

Mermaid Live Editorでjourneyの宣言からユーザージャーニーを書きます。sectionでフェーズを区切り、「アクション名:スコア:参加者」の形で行動を書く方法を、オンラインショッピングの例で学びます。1から5のスコアがグラフの高さになり、「価格を比較する」のような不満の場面が下がって見えることを確認します。

ChatGPTを例に、飲食店の予約から退店までのユーザージャーニーを生成させます。スコアの意味をプロンプトで明示するコツを学びます。確認するのは、書き方の形式、フェーズの区切り、スコアが実態に合っているかの3点です。数値を書き換えてスコアを調整しながら、チームで体験を議論する使い方もできるようになります。

縦軸と横軸の2つの指標で要素を4つのエリアに分類する四象限チャートを、緊急度と重要度でタスクを整理するアイゼンハワーマトリクスの例で解説します。エリアや軸のラベルを日本語でなく英語で書くという注意点と、優先度の整理、製品・事業の評価、ポジショニングといった活用場面を学びます。

Mermaid Live EditorでquadrantChartの宣言から四象限チャートを書きます。x-axisとy-axisで軸を、quadrant-1から4で4つのエリアのラベルを英語で設定し、各データポイントを0から1の座標で配置します。quadrant-1が右上で、そこから反時計回りに番号が振られることも確認します。

ChatGPTを例に、施策の優先度を工数と効果の2軸で整理する四象限チャートを生成させます。ラベルを英語で書かせる指定をプロンプトに加える理由を学びます。確認するのは、ラベルがすべて英語か、座標が0から1の範囲か、配置が意図どおりかの3点です。座標の数値を変えて位置を調整できるようになります。

全体に占める各要素の割合を扇形で示す円グラフを、ある月の支出を家賃や食費など6つの項目に分けた例で解説します。どの項目に費用が偏っているかの読み方と、割合・比率の可視化、予算やコストの内訳、アンケート結果の集計といった活用場面を学びます。

Mermaid Live Editorでpieの宣言から円グラフを書きます。pie titleでタイトルを1行で付け、ダブルクォートで囲んだ項目名とコロンの後の数値で項目を並べる書き方を、月の支出内訳の例で学びます。数値は相対的な重みとして扱われ、合計が100でなくても割合が自動で計算されることも確認します。

ChatGPTを例に、Webマーケティングの予算配分を円グラフで生成させます。項目名とラベル、数値の割合の2点を確認し、英語のラベルを日本語に直させる頼み方や、数値を書き換えて比率を調整する方法を学びます。項目が多すぎるときに「その他」にまとめる整え方も紹介します。

タスクを状態ごとの列に並べて管理するカンバン図を、Todo・In Progress・Doneの3列の例で解説します。作業が進むにつれてタスクが左から右へ移る読み方と、タスク管理、チームの進捗共有、タスクが溜まった列からボトルネックを見つけるワークフローの改善といった活用場面を学びます。

Mermaid Live Editorでkanbanの宣言からカンバン図を書きます。列名の下にインデントを1段深くして、IDと角括弧のタスク名でタスクを並べる書き方を、Todo・In Progress・Doneの3列の例で学びます。列名やタスク名に日本語が使えること、IDは短い英字にするとコードが読みやすくなることも確認します。

ChatGPTを例に、Webサイトのリニューアルプロジェクトのタスクをカンバン図で生成させます。タスクIDを短い英字にする指定をプロンプトに加えるコツを学びます。確認するのは、IDの書き方と、タスクが適切な列に入っているかの2点です。インデントの位置を変えて、タスクを別の列へ移す修正もできるようになります。