はんなりと、ゆるやかに

アジャイル、スクラムが好きなITエンジニアが日々から学んだことをアウトプット

Visual Studio Code を使ってマインドマップをマークダウン記法で書く

マインドマップmarkdown記法で書けるVisual Studio Code(VS Code)の拡張機能を試してみました。

marketplace.visualstudio.com

インストール方法

VS CodeのExtensionsでMarkmapを検索するとMarkmapが見つかりますのでインストールするだけです。
f:id:iucstscui:20210408225208p:plain

使い方

markdownのファイル(拡張子 .md)を開くと、右上にホウキのようなマークが出ます。
f:id:iucstscui:20210408230536p:plain
それをクリックするとマインドマップのプレビューが表示されます。
f:id:iucstscui:20210408230521p:plain

markdown記法ごとのマップ

v0.0.9 で確認しています。

見出し

# 見出し1-1
## 見出し2
### 見出し3-1
#### 見出し4
### 見出し3-2
##### 見出し5
###### 見出し6
# 見出し1-2

f:id:iucstscui:20210408231016p:plain
見出しのサイズが小さければ(# が多ければ)階層も深くなります。

リスト

# 見出し1
* リスト1-1
  * リスト2
    * リスト3
      * リスト4
        * リスト5
          * リスト6
            * リスト7
* リスト1-2
# 見出し2
1. リスト1-1
1. リスト2
1. リスト3  
    1. リスト3-1
1. リスト4

f:id:iucstscui:20210408232041p:plain
箇条書きリストも番号付きリストも対応されています。リストはネストすることで階層を表現できます。

チェックボックス

# 見出し1
- [ ] タスク1
- [x] タスク2

f:id:iucstscui:20210408233020p:plain
チェックリストは箇条書きリストと同じ見た目になります。

引用

# 見出し1
> 引用1-1
>> 引用2
>>> 引用3
> 引用1-2
>>>> 引用4

f:id:iucstscui:20210408233333p:plain
引用の数が階層として表現されます。

文字の装飾

# 見出し1
* ab *cd* ef
* ab **cd** ef
* ab ~~cd~~ ef

f:id:iucstscui:20210409231418p:plain
太字が見づらいですが、装飾もできます。

コードの入力

# 見出し1
* `コード`を書く

「`」で囲った部分がハイライト表示されます。
f:id:iucstscui:20210409230344p:plain

折り畳み

# <details><summary>abc</summary>def</details>

f:id:iucstscui:20210409231004p:plain
f:id:iucstscui:20210409231008p:plain
折り畳みのマークはでますが、展開はされません。残念。

リンク

# 見出し1
* [ブログ](https://iucstscui.hatenablog.com/)

f:id:iucstscui:20210409231816p:plain
リンクも使えます。

画像の埋め込み

# 見出し1
* ![Blog](https://3.bp.blogspot.com/-dknWIXCSs-w/WCqdlXLjszI/AAAAAAAA_j0/AygXNzLm3MclEb3x69Mr195tK84RUfKuACLcB/s800/blogger_man.png) 

f:id:iucstscui:20210409232856p:plain
画像へのリンクを記述するだけでは何も出ません。

# 見出し1
* ![Blog](https://3.bp.blogspot.com/-dknWIXCSs-w/WCqdlXLjszI/AAAAAAAA_j0/AygXNzLm3MclEb3x69Mr195tK84RUfKuACLcB/s800/blogger_man.png) blog

f:id:iucstscui:20210409233049p:plain
画像へのリンクのあと、文字を追加するとその文字分の幅に収まる形で画像が表示されます。

# 見出し1
* ![Blog](https://3.bp.blogspot.com/-dknWIXCSs-w/WCqdlXLjszI/AAAAAAAA_j0/AygXNzLm3MclEb3x69Mr195tK84RUfKuACLcB/s800/blogger_man.png) blogblogblogblog

f:id:iucstscui:20210409233129p:plain
文字を増やせば画像も大きくなりました。

| 左 | 中 | 右 |
|:-----------|------------:|:------------:|
| 左1 | 中1 | 右1 |
| 左2 | 中2 | 右2 |

f:id:iucstscui:20210409233741p:plain
表を書けばそれっぽく表現されます。

参考

qiita.com