ハイパーマッスルエンジニア

Vim、ShellScriptについてよく書く

トップ > Vim > マークダウンで書ける無料のマインドマップツール「markmap」が最高すぎた

マークダウンで書ける無料のマインドマップツール「markmap」が最高すぎた

Vim

　

マインドマップのツールで悩んでいるなら朗報だ。決定版をついに見つけてしまった。

  1. マークダウンで書ける
  2. OSSで無料
  3. 見た目がおしゃれ
  4. 素のhtmlやReactに組み込める
  5. CLIツールがありGithub Actionsに組み込める
  6. vimのプラグインがある

これらの特徴を持つのがずばりmarkmapだ。

markmap.js.org

公式のサイトにデモがあってどんな感じに書けるのか試せるからぜひやってみて欲しい。

MindMeister良さそうだけど月額でお金払うのはちょっとなあ〜とか、簡単にかけてシンプルなやつが欲しいんだよな〜という人には絶対刺さる。

Github Actionsで利用

markmapにはCLIも用意されているので、それを利用してmdファイルからhtmlを生成し、htmlを画像化するアクションを作った。mdファイルをpushすると発火。

.github/workflows/generate_html.yml

name: Generate HTML And PNG

on:
  push:
    branches:
      - master
jobs:
  build:
    name: Generate
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v2
        with:
          fetch-depth: 0
      - uses: actions/setup-node@v3
        with:
          node-version: 18
          cache: npm
      - run: |
          npm install -g markmap-cli@0.14.0
          npm install node-html-to-image@3.3.0

      - name: Convert Markdown To HTML And PNG
        run: |
          rm public/*.html public/*.png
          find data -name "*.md" | while read line; do
            filename=$(basename $line | sed "s/.md//g")
            # html作成
            markmap --no-toolbar --no-open $line -o public/$filename.html
            # png作成
            node libs/html_to_image.js public/$filename.html
          done
          # 次のステップでhtml, pngのみをコミットさせたいため不要なファイルを削除
          rm package-lock.json
          git checkout package.json
          git checkout yarn.lock

      - name: Commit and push
        run: |
          git status
          if [ -n "$(git status --porcelain 2>/dev/null)" ]; then
            git config --local user.email "action@github.com"
            git config --local user.name "GitHub Action"
            git add -A
            git commit -m "generate html"
            git push origin master
          fi

markmapを組み込んだサイトを作った。

htmlを画像化したものをプレビュー表示。クリックするとhtmlを開く。

Vimで使うためのプラグイン

coc-markmapが用意されている。インストールは下記で完了。

:CocInstall coc-markmap

下記のようなコマンドを設定すれば、:MarkMapでリアルタイムに変更を反映させながらマインドマップが書ける。

command! MarkMap :CocCommand markmap.watch

終わり

自分で書いた記事をmarkmapに食わせると面白い。

参考