マークダウンとフロー図、そしてmermaidへの挑戦
AIに誤解されにくい文章を書くために、私は最近マークダウンを必死に勉強しています...という話は前回させて頂いたと思います。しかし、システム設計の世界では文章だけではどうにもならない場面が必ず出てきます。
それが、フロー図をはじめとした「図」の存在です。
そして今後は、これらの図は「人間だけが理解できれば良い」という時代ではなくなります。
AIに渡して解析してもらうことが前提になるため、AIが読み取れる形式であることが絶対条件になっていくと私は感じています、というかもうそうなっていますね...
mermaidとの出会いと相性の良さ
そこで登場するのが、マークダウンと非常に相性が良いとされる***mermaid***です。mermaidとは、作図をするという「特定の用途に限定された言語」という事で、*** ドメイン固有言語(DSL)に分類される ***と聞きました。
広義の意味での「言語」の一つになりますね。
mermaidは、コードのようにテキストで図を記述できるため、AIに渡す際にも非常に扱いやすい形式になります。
実務では「ツールで生成した方が早い」と言われる場面もあるかもしれませんが、私は自分が理解していないものを生成に任せるのがとても怖いタイプです。
非効率でも泥臭くても、自分の頭に焼き付くまで手作業で書いてみる。
その上で「よし、もう理解できた」と思えたら、ツールと手作業の二足のわらじでやっていくのが自分には合っていると感じています。
もりもり家ネットワーク構成図をmermaidで作ってみた
そんなわけで、まだまだ自己流ではありますが、mermaidを手入力して***もりもり家のネットワーク・デバイス構成図***を作ってみました。入力には、マイクロソフトの神エディターである Visual Studio Code を使用しました。
拡張機能の***Preview Markdown Mermaid Support***を使うことで、リアルタイムにプレビューしながら破損していないか確認できるため、とても安心して作業できました。
マイクロソフトの皆さん、拡張機能の開発者さん、そしてこの技術を確立してくださった全ての方々の努力に心から敬意を抱きました。
自分ももっと頑張らないといけないなと、気持ちを新たにしています。
今回作ったmermaidコード
以下に、今回作成したネットワーク構成図の mermaid コードを掲載します。ノード名の付け方や、サブグラフの定義の方法とか、「これでいいんかなぁ」とか手探りで自分の頭で分かる形で整えています。
また、色や見た目などの書式情報はAIにとってはノイズになるとのことで(AI自身がそう申しておりました)、人間のための書式情報は入れておりません。
VS Code のプレビューで確認しながら作ったので、構造が破綻していないはず…と信じています。
```mermaid
flowchart TD
subgraph TD OUTER[宅外]
%% メインルート %%
OUTER-F001[プロバイダー] --[ 光10Gbps ]--> OUTER-F002[自宅電柱];
OUTER-F002 --[ 光10Gbps ]--> MYHOME-F001
end;
subgraph TD MYHOME[自宅]
%% メインルート %%
MYHOME-F001[自宅引込] --[ 光10Gbps ]--> MYHOME-F002[ONU];
MYHOME-F002 --[ LAN10Gbps ]--> MYHOME-F003[docomo光電話ルーター];
%% 光電話ルーターの分配ルート %%
MYHOME-F003 --> |接続先| MYHOME-B001{分配};
MYHOME-B001 --> MYHOME-F004_CON1[光電話回線];
MYHOME-B001 --> MYHOME-F004_CON2[10Gルーター接続];
MYHOME-F004_CON1 --[ 電話線 ]--> MYHOME-F005[パナソニックFAX対応固定接続];
MYHOME-F004_CON2 --[ LAN10Gbps ]--> MYHOME-F006[10G対応ルーター-メッシュWiFiコントローラー];
%% 10G対応ルーターの分配ルート %%
MYHOME-F006 --> |接続先| MYHOME-B002{分配};
MYHOME-B002 --> MYHOME-F007-CON1[有線_A1];
MYHOME-B002 --> MYHOME-F007-CON2[有線_A2];
MYHOME-B002 --> MYHOME-F007-CON3[有線_A3];
MYHOME-B002 --> MYHOME-F007-CON4[有線_A4];
MYHOME-B002 --> MYHOME-F007-CON5[WiFi_A1];
MYHOME-B002 --> MYHOME-F007-CON6[WiFi_A2];
MYHOME-B002 --> MYHOME-F007-CON7[WiFi_A3];
MYHOME-B002 --> MYHOME-F007-CON999[WiFi_A999];
%% デバイス %%
MYHOME-F007-CON1 --[ LAN10Gbps]--> MYHOME-D001[初代プレイステーション5];
MYHOME-F007-CON2 --[ LAN1Gbps]--> MYHOME-D002[プレイステーション4];
MYHOME-F007-CON3 --[ LAN1Gbps]--> MYHOME-D003[ナスネ];
MYHOME-F007-CON4 --[ LAN1Gbps]--> MYHOME-D999[*予備*];
MYHOME-F007-CON5 --[ 無線 ]--> ROOM-F001[中継機接続];
MYHOME-F007-CON6 --[ 無線 ]--> MYHOME-D004[ノートPC *ZenBook 13*];
MYHOME-F007-CON7 --[ 無線 ]--> MYHOME-D005[ノートPC *ROG FLOW Z13];
MYHOME-F007-CON999 --[ 無線 ]--> MYHOME-D998[その他多数のデバイス];
end;
subgraph TD ROOM[部屋]
%% メインルート %%
ROOM-F001 --[ 無線 ]--> ROOM-F002[中継機-メッシュWiFiエージェント];
%% 中継機の分配ルート %%
ROOM-F002 --> |接続先|ROOM-B001{分配};
ROOM-B001 --[ 無線 ]--> ROOM-F003-CON1[WiFi_B1];
ROOM-B001 --[ 無線 ]--> ROOM-F003-CON2[WiFi_B2];
ROOM-B001 --[ 無線 ]--> ROOM-F003-CON3[WiFi_B3];
ROOM-B001 --[ 無線 ]--> ROOM-F003-CON4[WiFi_B4];
ROOM-B001 --[ 無線 ]--> ROOM-F003-CON5[WiFi_B5];
ROOM-B001 --[ 無線 ]--> ROOM-F003-CON6[WiFi_B6];
ROOM-B001 --[ 無線 ]--> ROOM-F003-CON999[WiFi_B999];
%% 戻り %%
ROOM-B001 --[ メッシュコントロール ]--> MYHOME-F006;
%% デバイス %%
ROOM-F003-CON1 --[ 無線 ]--> ROOM-D001[***プレイステーション5 PRO*** *PS5 PRO*];
ROOM-F003-CON2 --[ 無線 ]--> ROOM-D002[マイクロソフトSurface Go2];
ROOM-F003-CON3 --[ 無線 ]--> ROOM-D003[ソニーXperia 10 II];
ROOM-F003-CON4 --[ 無線 ]--> ROOM-D004[ソニーXperia 1 II];
ROOM-F003-CON5 --[ 無線 ]--> ROOM-D005[ソニーXperia 1 V];
ROOM-F003-CON6 --[ 無線 ]--> ROOM-D006[プレイステーションVita];
ROOM-F003-CON999 --[ 無線 ]--> ROOM-D999[その他多数のデバイス];
end;
```
これが実際に出力した図ですが、pngイメージで出力しています。
というか、汎用的に使おうとしたら、イメージ出力しかありません。
今後のmermaidの現在の課題にもなるんですが、今回の記事ではここまでにさせてください。
何はともあれ、こうして自分の環境を図として可視化すると、頭の中が整理されてとても気持ちが良いです。
そして、AIに渡せる形式で残せるというのが、これからの時代において大きな意味を持つと改めて感じました。
それではまた次の記事でお会いしましょう!!
