mermaidでデスク周りの配線を管理する【実例付き】

こんにちは、こふです。

Mermaid 記法を初めて書いてみました。現実に役立つ何かを表現したくなり、今まで避けていたデスクまわりの配線を書いてみました。

これにより、何と何が繋がっているか、どこに無駄があるかが分かります。何より楽しかったのも事実。

次の図のようになりました。

実線が有線で繋いでいるもの、点線が Bluetooth などの無線で繋いでいるものです。

このブログは自作なのですが、Mermaid 記法を変換することに対応していないので画像を貼っているのです。

これくらいの配線の量になると、端末によっては表示のパフォーマンスが落ちる可能性は十分にあるので、画像でも問題はないと考えています。

以下のようになりました。コピペして個人利用の際に使っていただくには問題ありません。

英語で記載していますが、日本語でも問題ありません。個人的に英語の方が統一感があり見やすいので気に入っています。

コピー
1graph LR;
2    Socket---TowerPowerStrip;
3    ApplePencil-.-iPad;
4    USBPower---iPad;
5    USBPower---BTEearphone;
6    USBPower---KindlePaperWhite;
7    Socket---LAN;
8    USBPower---TowerPowerStrip;
9    Oppo-.-BTEearphone;
10    USBPower---Oppo;
11    TowerPowerStrip---BenQ_Light;
12    HuaweiKeyboard-.-M1_MacBookAir;
13    MagicMouse-.-M1_MacBookAir;
14    SonyHeadphone-.-M1_MacBookAir;
15    TowerPowerStrip---WideMonitor;
16    LAN---DockingStation;
17    TowerPowerStrip---USB_C_AC_Adapter;
18    USB_C_AC_Adapter---DockingStation;
19    DockingStation---M1_MacBookAir;
20    DockingStation---USB_Hub;
21    KeyChrone---USB_Hub;
22    USB_Hub---AG03;
23    TowerPowerStrip---Bose;
24    TowerPowerStrip---EchoDot;
25    Microphone---AG03;
26    EchoDot---Bose;
27    AG03---Bose;
28    AG03---Sony_Earphone;
29    WebCamera---USB_Hub;
30    WideMonitor---DockingStation;
31    LAN---NintendoSwitch;
32    TowerPowerStrip---NintendoSwitch;
33    NintendoSwitch---WideMonitor
34    NintendoSwitch---AG03
35    Controler---NintendoSwitch
36    USB_Hub---Printer;
37    TowerPowerStrip---Printer;

メリットが数多くあります。現時点ではデメリットはほとんど感じていませんが、次に書きますね。

• 図の書き換えに文字を修正するだけ
• コピペが非常に楽（部分的にコピーも可能）
• 何より軽く動作する
• マウスが不要で腱鞘炎を防げる

こんなところでしょうか。とにかく便利なのが伝われば嬉しいです。

1 点だけです。

• Mermaid 記法を出力する仕組みが必要

ですが、現代においてはネット上のツールが盛んに作成されていること、ローカル（ご自身の PC など）で出力する仕組みも簡単に作れることから、問題はありません。

近頃人気の Notion というなんでも出来るツールがあるのですが、Notion でも Mermaid 記法が使えます。

参考：グラフを生成可能なマークダウン構文「Mermaid」が Notion で利用出来るようになりました #notion | DevelopersIO

ローカルで使いたいなら VSCode をインストールして書いてプレビューのプラグインを入れるだけ。シンタックスハイライトも効くので書くのも楽でした。

本記事では、配線を Mermaid 記法でまとめられることをお伝えするだけなので、使い方の詳細は説明しません。

その代わり、参考サイト・ツールを紹介します。

• 公式ドキュメント
  • mermaid - Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.
• オンラインエディタ
  • Online FlowChart & Diagrams Editor - Mermaid Live Editor

こんな方法で配線を管理できるんだ、と知ってもらえると嬉しいです。

電気工事系の設計では、きっと専用のツールを使うのだろうと思いますが、個人で簡易的にやるならこれで十分でしょう。

最後までお読みいただきありがとうございました。

• mermaid - Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.