VS CodeでMindmapを描ける拡張をまとめました。2種類あります。
- 作図記法
- VS Code上でGUIツール
参考の使い分け
作図記法
| 記法 | 拡張 | ダウンロード数1 | 拡張子 | ファイル出力 | 備考 |
|---|---|---|---|---|---|
| Mermaid | Markdown Preview Enhanced | 7,599,304 | .md |
|
|
| PlantUML | Markdown Preview Enhanced | 7,599,304 | .md |
|
|
| Markmap | Markmap | 205,759 | .md | HTML, SVG | GUIのMindmapツールに見た目が近い |
GUIツール
| 記法 | 拡張 | ダウンロード数1 | 拡張子 | ファイル出力 | 備考 |
|---|---|---|---|---|---|
| Draw.io integration | Draw.io integration | 3,175,046 | .drowio, .dio | SVG, png, drawio | VS Code上での汎用描画GUIツール |
| vscode-mindmap | vscode-mindmap | 128,828 | .km | png |
|
| Felis Mindmap | Felis Mindmap | 7,545 | .felis, .xmind | png | VS Code上でのGUIツール |
| mxmind-mindmap | Mxmind mind map | 1,376 | - | png, PDF, SVG, Markdown | VS Code上でのGUIツール |
| Code Mind Map | Code Mind Map | 130 | - | txt(json) | VS Code上でのGUIツール |
| Excalidraw | Exdalidraw | 331,598 | .excaldraw | ? | エラーで読み込めず |
| FreeMind | FreeMind | 6,824 | .vmind | ? | エラーで読み込めず |
作図記法
Mermaid
Mindmap以外も描ける作図記法の一つですね。他のMarkdownに組み込めるので使い勝手が良いです。
- 公式
- 参考記事
```mermaid
mindmap
Japan
Hokkaido
Tohoku
Aomori
Kanto
Tokyo
Shinjuku
Saitama
Kanagawa
```
- 変わり種としてはflowchart(graph)図でもMindmap風が作成できる
```mermaid
graph
Japan --- Hokkaido & Tohoku & Kanto
Tohoku --- Aomori
Kanto --- Tokyo & Saitama & Kanagawa
Tokyo --- Shinjuku
```
PlantUML
Mermaid同様、Mindmap以外も描ける作図記法の一つですね。他のMarkdownに組み込めるので使い勝手が良いです。
- 公式
- 参考記事
```plantuml
@startmindmap
+ Japan
++ Hokkaido
++ Tohoku
+++ Aomori
++ Kanto
+++ Saitama
+++ Tokyo
++++ Shinjuku
+++ Kanagawa
@endmindmap
```
- 以下のようにするとRootノードの左右にマップが描ける
```plantuml
@startmindmap
+ Japan
-- Hokkaido
-- Tohoku
--- Aomori
++ Kanto
+++ Saitama
+++ Tokyo
++++ Shinjuku
+++ Kanagawa
@endmindmap
```
Markmap
GUIツールでのカラフルなMindmapに見た目が近いですね。
- 公式
- 参考記事
# Japan
## Hokkaido
## Tohoku
- Aomori
## Kanto
- Saitama
- Tokyo
- Shinjuku
- Kanagawa
GUIツール
Draw.io integration
Mindmapだけではなく、汎用の描画ツール
- 公式
Excalidraw
Mindmapだけではなく、汎用の描画ツール。だが私の環境では現状動かず。
- 公式
vscode-mindmap
GUIツールです。マウス操作かショートカットで描きます。
- 公式
- 参考記事
Felis Mindmap
これもGUIツール。
mxmind-mindmap
これもGUIツール。
- 公式
FreeMind
私の環境ではエラーで現状では動かず。
- 公式
Code Mind Map
GUIツール
Mermaid, PlantUMLについては他の作図、画面レイアウトなどの参考記事を書いています。