MarkdownでのMindmapの表示に対応した

2026年3月30日

約5分

💡 Summary

AstroブログにMarkmapを統合し、Markdownの見出しやリストから美しくインタラクティブなマインドマップを生成する機能を実装しました。特筆すべきは、CSS変数を利用したダークモードへの完全対応と、専用ツールバーへのグラスモーフィズム採用です。通常時は透過しホバー時のみ浮き上がるスマートな操作性を実現することで、記事の可動性を損なわずに高度な可視化を提供しています。従来のMermaid.jsに比べ直感的で構造的な表現が可能となり、自由な思考の整理を強力にサポートします。

日記・ブログ上でのマインドマップの表示

AstroのRemark機能でMarkdown上にmarkmapのMindmapを表示する機能を追加しました。markmapを使うと、Markdownで書いた構造体やリストをそのままMindmapに変換して表示できます。AstroではデフォルトではMindmapを表示できませんが、Remarkを使ってMarkdownのコンテンツを変換させることでMindmapの表示に対応しています。

Markmapによるマインドマップ表示のメリット

Markmapは、従来のMermaid.jsと比較して、デザインの洗練度やノードの折りたたみ機能、複雑な構造の再現性が高く思考の可視化に最適です。さらに、markmap-toolbar の導入により、ズーム操作や全体表示が直感的に行えるようになりました。このツールバーにはグラスモーフィズムを採用し、通常時はコンテンツを邪魔しないよう透過させ、ホバー時のみくっきりと表示される洗練されたUI/UXを追求しています。

ダークモードへの完全対応

マインドマップの描画には、サイト共通のCSS変数（--text-primaryなど）を直接SVGプロパティに注入する手法をとりました。これにより、OSの設定やユーザーによるテーマ切り替えにリアルタイムで色調が追従します。ダークモード時でも、枝の色（エッジ）の明度を自動補正することで、高い視認性と没入感を両立させています。

このように表示ができて、なかなか便利だと思います。Mermaid.jsでのマインドマップの表示も試したのですが、表示がまったく美しくなく、スパイダー図のようでマインドマップのようになっていませんでした。Markmapの方がマインドマップとして洗練されていて、素のMarkdownで書けて表示が綺麗で非常に便利です。マインドマップのルールにも従った構造で表示してくれるので、Markmapを採用しました。インタラクティブ性もあり、枝ごとに折りたたんで表示する機能もあるので、Mermaid.jsと比べるのが酷であるようにも思います。

markmapの書き方

このMindmapですがMarkdownで見出しを使ったりリストを使ったりすることで簡単に描けます。

```markmap
# Diary
## 資産形成のモデル
- 収入
- 支出
- 投資
- ポイント
- 資産
## 技術
### TypeScript
- Astro
- Svelte
### Python
### Flutter
## 趣味
- プログラミング
- コーヒー
- 投資
- 読書
- 香水
```

コードブロックにmarkmapと書いてMarkdownで構造体を書くだけで動きます。書き方には柔軟性がありますが小さなマインドマップであればリスト形式が直感的にみやすく、複雑であれば見出し形式が構造でわかりやすい気がしています。

今後のMindmapの利用について

ダイアリーは「薬にも毒にもならないようなことを自由に書いています。」とあるように自由に書き散らしているので構造も何もないと思うのですが、あんまり書いていないブログではとくに役立つだろうと思います。ただ、日記でも上記のように利用ができるのでそれなりにかけている時に利用ができると良いのかと思っています。なので、これ以降の日記からはゆるーく使ってみたい気持ちです。