線画からMermaidへ — Evernote MCPで編集可能な構成図を作ってみた

ChatGPTを使う時に、得られた情報をまとめてEvernoteに移すことをしている。これ、高校の予備校のときからの癖なんだが、先生の板書を急いでノートを取って、後で見返しても全くさっぱり。なので、予備校から帰ってきたら、その日の板書を綺麗に書き直していた。恐ろしいことに、それを知った先生は、授業の最初にまず、自分のノートを確認してから始めるようになったwおかげ成績はぐんぐんあがり、物理、化学あるいは数学が満点の場合、センター試験の点数関係なしに合格ができるという大学に合格してしまった。センター試験全体で４００点くらいだったんですよねぇ。
Evernoteは、洒落たノートかというと、中はMarkdownなので、ツールを使えば簡単にMarkdownにできる。LLMにも渡しやすい。月額が高いと言われるが、自分の場合は元を取っている気がする。

閑話休題

これまでChatGPTにネットワークやKubernetesの構成を説明させるとき、テキストの線画（ASCIIアート）で図を表現することが多かった。コピーしやすい反面、構成が複雑になると線が交差し、修正や再利用もしづらい。
ChatGPTにもHistoryがあるのだが、Evernoteにコピペしたり、MCP経由で書き出したりしている。

1. 今までは線画だった

例えば、Internetからルーターを経由してKubernetesクラスタへアクセスする構成を、従来の線画で表すとこうなる。

Internet
   |
 Router
   |
   v
+---------------- Kubernetes Cluster ----------------+
| Control Plane                                      |
|       :                                             |
|       : 管理                                        |
|  +----+--------------+                             |
|  |                   |                             |
| Worker Node 1     Worker Node 2                    |
|  +-------------+    +-------------+                |
|  | containerd  |    | containerd  |                |
|  | Web Pod 1   |    | Web Pod 2   |                |
|  +-------------+    +-------------+                |
|                                                      |
| Ingress Controller --> Service --> Web Pod 1 / 2 |
+------------------------------------------------------+

概念は伝わるが、配置や線を手で調整する必要がある。しかも表示フォントや折り返しの影響を受ける。なお、ここではControl PlaneとWorkerの関係を概念的に表している。

2. EvernoteはMermaidに対応していた

最近、ChatGPTもMermaidを使って構成図を表示するようになってきた。従来の線画はブログに貼り付けるとレイアウトが崩れやすかったので、これは便利だ。
Mermaidはテキストで図を定義する仕組みだ。EvernoteのAIダイアグラム機能では自然言語から生成でき、Mermaidコードを直接編集することもできる。コードと図を行き来できるのが便利だ。

3. 同じ構成をMermaidコードで書く

以下がMermaidのソースコード。flowchart TDで上から下への配置、subgraphでクラスタやノードをグループ化する。

flowchart TD
Internet[“Internet”] –> Router[“Router”]

subgraph K8s[“Kubernetes Cluster”]
CP[“Control Plane”]
Ingress[“Ingress Controller”]
SVC[“Service”]

subgraph W1[“Worker Node 1”]
P1[“Web Pod 1”]
CR1[“containerd”]
end

subgraph W2[“Worker Node 2”]
P2[“Web Pod 2”]
CR2[“containerd”]
end

Ingress –> SVC
SVC –> P1
SVC –> P2
CP -.-> W1
CP -.-> W2
end

Router –> Ingress

4. Mermaidで描画した構成図

上記コードをEvernoteのネイティブMermaidブロックとして挿入した。表示される図はその場で編集可能だ。

 

5. Evernote MCPからも図を作成できるのか？

最初はEvernote MCPでノートを作り、コードをpre要素として書き込んだ。保存と読み戻しには成功したものの、表示はコードのままだった。
そこで、Evernoteの画面で作成したAIダイアグラムのノートをMCPで読み取り、内部形式を調べた。Mermaid図は通常のコードブロックではなく、ENMLのdiv要素に –en-mermaidblock:true というスタイル属性を持つ形で保存されていた。–en-displayMode:preview や –en-requiredFeatures も含まれている。
この形式を参考にMCPでMermaidブロックを書き込んだところ、Evernote上で図として表示され、コード編集もできることを確認できた。つまりPNGなどの静的画像ではなく、編集可能な図をMCP経由で作れる。

6. 使いどころと注意点

Kubernetesの構成、ネットワーク、APIシーケンス、障害切り分け、バックアップフローなどはMermaidとの相性がよい。一方で、細かい物理配線や厳密な配置が必要な図では専用の作図ツールのほうが適している。
今回のMCP書き込みはEvernoteの実際の保存形式を参考にした検証結果であり、Mermaidブロックの内部表現が将来も同じである保証はない。また、図は概念図であり、KubernetesのControl PlaneがWorkerに直接データ通信を中継することを示しているわけではない。
注意としては、もし、ChatGPTのコピーボタンを押して、コピーをする場合、Mermaid図が正しく取り込めず、コードになっているので、図をクリックして、改めてコードをコピーして、EvernoteのMermaid Diagramに書き込む必要がある。もちろん、EvernoteのMermaid Diagramで編集もできるので、コピペ後も図を書き換えられる。これは便利

まとめ

これまで線画で書いていた技術構成図をMermaidに置き換えると、コードとして再利用でき、Evernote上で図として閲覧・編集できる。さらにEvernote MCPを使えば、ChatGPTから説明文と編集可能な構成図を一つのノートにまとめられる。技術メモの作り方が少し変わりそうだ。

返信を残す