マインドマップ

マインドマップについて

マインドマップは、中心となるトピックを軸にアイデアを放射状に整理し、サブトピックや詳細へと枝分かれさせる図です。Tony Buzan が1970年代にノートやブレインストーミングのツールとして普及させ、以来、教育・プロジェクト計画・ミーティングの進行・ナレッジマネジメントの場で広く活用されています。非線形に枝分かれする構造は、連想的思考の働き方を反映しており、アウトライン作成より速く、自由記述より体系的です。

Schematex のマインドマップは、markmap にインスパイアされた Markdown 見出し+箇条書き DSL を採用しており、多くの人がすでに慣れ親しんでいる形式です。レイアウトスタイルは2種類あります。古典的な放射状の map(全方向に枝を広げる)と、水平ツリーの logic-right です。このページでは、現在パーサーが受け付ける構文を説明します。

mindmap·§
↘ preview
100%
Product Launch Plan map mindmap with 27 nodes Direct competitors Pricing benchmarks Competitive analysis SMB customers Enterprise pilot Target segments Market readiness Core API complete Edge cases resolved Feature freeze Load testing CDN configuration Cache rules Geo routing Infrastructure Engineering Landing page live Email campaign Press outreach TechCrunch pitch Newsletter sponsors Go-to-market Week 1 signups Activation rate NPS at day 30 Success metrics Product Launch Plan
UTF-8 · LF · 33 lines · 515 chars✓ parsed·1.3 ms·14.9 KB SVG

1. はじめてのマインドマップ

最小限の実用的なマインドマップ:中心トピックと2つの枝、そのうち1つにサブ項目があります。

mindmap·§
↘ preview
100%
Team retrospective map mindmap with 7 nodes Clear sprint goals Good test coverage What went well Slower PR reviews Add a review SLA What to improve Team retrospective
UTF-8 · LF · 11 lines · 149 chars✓ parsed·0.4 ms·4.0 KB SVG

以下の4つのルールで利用の80%をカバーできます。

  1. 最初の行に任意で mindmap キーワードを書き、その後に空行を入れます。
  2. ルート(根)は単一の # 見出しです。1つだけ使用できます。
  3. #####、さらに深い見出しで枝の深さを設定します。見出しレベルがツリーの深さに対応します。
  4. -*+ の箇条書きを使って、任意の見出しの下にサブ項目を追加します。スペース2つのインデントで深さが1段階増えます。

コメントはサポートされていません。設定のみに %% ディレクティブ(# ルートの前)を使用してください。


2. 見出しと深さ

見出しレベルはツリーの深さに直接対応します。# は常にルート(深さ0)です。## は深さ1、### は深さ2、以下同様に ######(深さ5)まで続きます。

mindmap

# Root
## Branch A         ← depth 1
### Sub-branch      ← depth 2
#### Leaf           ← depth 3
## Branch B

見出しはレベルを飛ばすことができます。## の後に #### を置いても有効で、深さ3のノードが生成されます。ツリーの深さはルートからの相対値であり、直前の見出しからの相対値ではありません。


3. 箇条書き

箇条書きを使うと、見出しの枝をさらに詳細に展開できます。-*+ のいずれもマーカーとして使用できます。インデント スペース2つごとに、直前の見出しに対する深さが1段階増えます。

## Risks
- Technical complexity         ← depth 2 (one level under ## Risks)
  - Legacy integrations        ← depth 3 (2 spaces indent)
    - Auth service             ← depth 4 (4 spaces indent)
- Team availability            ← depth 2 again
mindmap·§
↘ preview
100%
Book outline map mindmap with 14 nodes Why this matters Historical context Current state What you will learn Chapter 1 — Introduction Concept A Definition Examples Concept B Definition Step-by-step walkthrough Worked example Chapter 2 — Core concepts Book outline
UTF-8 · LF · 18 lines · 267 chars✓ parsed·0.7 ms·7.7 KB SVG

4. インラインフォーマット

ノードラベルは Markdown インラインフォーマットのサブセットをサポートしています。パーサーはパース時にラベルをトークン化し、レンダラーがそのトークンを使ってスタイル付きテキストを出力します。

構文効果
**text**太字**Critical path**
*text*斜体*optional*
`code`等幅コード`npm install`
[text](url)リンク[RFC 7519](https://tools.ietf.org/html/rfc7519)
[ ] item未チェックタスク[ ] Write tests
[x] itemチェック済みタスク[x] Design review

チェックボックスはラベルの先頭(他のテキストより前)に置く必要があります。インラインフォーマットはネスト可能です:**[bold link](url)**

mindmap·§
↘ preview
100%
Sprint 24 review map mindmap with 12 nodes Auth redesign JWT + refresh tokens API rate limiting per-user Error budget dashboard Completed Mobile push notifications iOS APNs integration Android FCM setup In progress Payment webhook waiting on Stripe team Escalated to account manager Blocked Sprint 24 review
UTF-8 · LF · 17 lines · 380 chars✓ parsed·1.1 ms·9.7 KB SVG

5. レイアウトスタイル

%% style: ディレクティブでレイアウトアルゴリズムを選択します。# ルート見出しの前に置いてください。

スタイルレイアウト最適用途
map(デフォルト)放射状 — 枝が中心から全方向に広がるブレインストーミング、コンセプトマップ、自由な探索
logic-right水平ツリー — 全枝が右方向に伸びる構造化アウトライン、階層、連続的な分解
futureswheel同心円状リング — ルートがハブ、各見出しレベルが独自のリングに配置フォーサイト、影響分析、構造的ブレインストーミング
driver水平ツリー — 左側の目標から右に向かってドライバーを経由してアイデアへ流れる改善プログラム、目標 → ドライバー → アクション分解
%% style: map
%% style: logic-right
%% style: futureswheel
%% style: driver

map(デフォルト)— 放射状レイアウト、枝が中心から全方向に広がります。ブレインストーミングやコンセプトマップに最適です。

mindmap·§
↘ preview
100%
Machine learning map mindmap with 19 nodes Decision tree SVM Neural net Classification Linear Gradient boosting Regression Supervised K-means DBSCAN Clustering PCA t-SNE Reduction Unsupervised Q-learning Policy gradient Reinforcement Machine learning
UTF-8 · LF · 24 lines · 268 chars✓ parsed·4.1 ms·10.4 KB SVG

logic-right — 水平ツリー、全枝が右方向に伸びます。構造化アウトラインや連続的な階層に最適です。

mindmap·§
↘ preview
100%
Machine learning logic-right mindmap with 19 nodes Decision tree SVM Neural net Classification Linear Gradient boosting Regression Supervised K-means DBSCAN Clustering PCA t-SNE Reduction Unsupervised Q-learning Policy gradient Reinforcement Machine learning
UTF-8 · LF · 25 lines · 290 chars✓ parsed·1.0 ms·10.3 KB SVG

futureswheelフューチャーズホイール(Jerome Glenn、1971/72年)は、結果を考察するための古典的な構造的ブレインストーミング形式です。中心的な事象やトレンドがハブに位置し、一次的な結果が内側のリングに、二次的な結果が次のリングへと続きます。各子要素は親の角度セクター内に収まり、各リングは次数ごとに色分けされるため、読み手は元の事象からの波及の距離を一目で把握できます。深さはリングに対応します。# がハブ、## が最初のリング(1次)、###/見出し下の箇条書きが次のリング(2次)、さらに深いレベルは外側へ続きます。

mindmap·§
↘ preview
100%
Remote work becomes default futures-wheel mindmap with 10 nodes Remote work becomes default Less commuting Lower carbon emissions Cheaper city living Distributed teams Async communication norms Global hiring pools Empty offices Commercial real estate slump Repurposed to housing
UTF-8 · LF · 16 lines · 272 chars✓ parsed·0.8 ms·6.5 KB SVG

driverドライバーダイアグラムは、IHI(医療改善研究所)の改善モデルから来たプランニングツールです。左から右に向かって整然としたツリーとして読みます。左端に目標(Aim)、次の列にプライマリドライバー(目標を動かす少数の高レバレッジ領域)、そこからさらに右にセカンダリドライバーと具体的な変化のアイデアが分岐します。ツリーレベルが構造に対応します。# が目標、## がプライマリドライバー、各配下の箇条書き/深い見出しがセカンダリドライバーと変化アイデアになります。目標がどのように達成されるかを示したいときに使用してください。

mindmap·§
↘ preview
100%
Reduce 30-day readmissions logic-right mindmap with 7 nodes Teach-back at bedside Med reconciliation Reliable discharge process Appointment within 7 days Post-discharge phone call Timely follow-up Reduce 30-day readmissions
UTF-8 · LF · 12 lines · 207 chars✓ parsed·0.5 ms·4.0 KB SVG

6. ディレクティブ

ディレクティブは # ルート見出しのに置く %% 行です。図全体をグローバルに設定します。

ディレクティブデフォルト効果
%% style: …maplogic-rightfutureswheeldrivermapレイアウトアルゴリズム
%% theme: …任意の文字列(なし)レンダラーに渡されるテーマオーバーライド
%% maxLabelWidth: …整数 80〜1000240ラベルが折り返される前の最大ピクセル幅
mindmap
%% style: logic-right
%% maxLabelWidth: 320

# Wide label root
mindmap·§
↘ preview
100%
Schematex features logic-right mindmap with 13 nodes One keyword per diagram AI-friendly syntax CJK support DSL-first design Hand-written parser No D3, no dagre ~KB-level bundle Zero dependencies IEEE for logic gates IEC for circuits McGoldrick for genograms Standards-compliant Schematex features
UTF-8 · LF · 20 lines · 329 chars✓ parsed·0.7 ms·7.3 KB SVG

7. ラベルとコメント

  • ルートタイトル: ルート見出し行の # 後のテキスト。
  • 枝ラベル: ##### 等の後のテキスト。
  • 箇条書きラベル: - / * / + マーカーの後のテキスト。
  • インラインフォーマット: **bold***italic*`code`[text](url)[ ] / [x]
  • コメント: 本文内ではサポートされていません。設定には # ルートの前の %% ディレクティブを使用してください。本文内の %% 行はディレクティブとして扱われます(認識されない場合は無視されます)。

8. 予約語とエスケープ

ドキュメント先頭の予約語: mindmap(任意のキーワード)と %%(ディレクティブプレフィックス)。

ルートの予約: 正確に1つの # 見出し。2つ目の # 見出しはパースエラーになります。

箇条書きマーカー: スペースに続く -*+。スペースが続かない * は、ラベルテキスト内に現れる場合、斜体マーカーとして扱われます。

インラインの競合: [ ] または [x] で始まるラベルはチェックボックスとしてパースされ、Markdown リンクではありません。[ で始まるラベルが必要な場合は \[ と書いてください。バックスラッシュで角括弧をエスケープします。


9. よくある間違い

書いた内容パーサーの応答修正方法
# 見出しが2つError: multiple # center nodes not allowedルートとして # 見出しを正確に1つ使用する
##Branch## の後にスペースなし)見出しと認識されず無視される必ずスペースを入れる:## Branch
スペース3つでインデントした箇条書き深さ = lastHeadingDepth + 1 + floor(3/2) = lastHeadingDepth + 2(予期しないレベルが生まれることがある)スペースの倍数(0、2、4、6…)を使用する
%% style: radial不明な値は無視され、レイアウトは map のままmaplogic-rightfutureswheeldriver を使用する
mindmap キーワードがドキュメント中間平文行として扱われる(キーワードは最初の行のみ認識される)mindmap を内容の前の1行目に置く
[ ]text(角括弧の後にスペースなし)チェックボックスと認識されず、[ ]text のまま描画される[ ] text(閉じ括弧の後にスペースが必要)

10. 文法(EBNF)

document       = ("mindmap" NEWLINE)? (blank | directive)* node*

directive      = "%%" WS key ":" WS value NEWLINE
key            = "style" | "theme" | "maxlabelwidth"

node           = heading | bullet
heading        = INDENT? "#"+ SPACE label NEWLINE
bullet         = SPACE* bullet-marker SPACE label NEWLINE
bullet-marker  = "-" | "*" | "+"

label          = inline-token*
inline-token   = checkbox
               | "**" inline-token* "**"
               | "*" inline-token* "*"
               | "`" code-text "`"
               | "[" inline-token* "]" "(" url ")"
               | plain-text

checkbox       = "[ ]" SPACE | "[x]" SPACE | "[X]" SPACE

INDENT         = WS*    %% headings may have leading whitespace (ignored)
SPACE          = " " | "\t"

深さのルール:

  • 見出し # → 深さ0(ルート)
  • 見出し ## → 深さ1、### → 深さ2、以下同様
  • 先頭スペース n 個の箇条書き → 深さ = lastHeadingDepth + 1 + floor(n / 2)

権威ある情報源:src/diagrams/mindmap/parser.ts。このドキュメントとパーサーが乖離している場合、パーサーが優先されます。Issue を立ててください。


11. ロードマップ

計画中 — 現在はパース不可。 生成する DSL でこれらを使用しないでください。パーサーが拒否または無視します。

  • %%{init: {…}}%% ブロック — テーマ/設定用の Mermaid スタイル init ブロック。現在は %% 行ディレクティブのみサポートされています。
  • 自動番号付き枝%% numbering: true で各枝に 1.、1.1. などのプレフィックスを付ける。
  • コールアウト/ノートノード — 任意のノードにフローティング注釈ボックスを付けるための特別なマーカー。
  • 画像ノード![alt](url) をノードラベル全体としてインライン画像としてレンダリング。
  • 折りたたみ枝%% collapsed: branchId でサブツリーを折りたたみインジケーターとして描画。

早急に必要な場合は GitHub の Issue でトラッキングしてください。


関連サンプル

サンプルギャラリーから使用可能なシナリオ:

Found this useful?

Schematex is free, fully open source, and zero-dependency. A star helps other developers discover it.