視覚化理解促進計画

新しいタスクにjoinされると、まずはドキュメントを読んで現状のシステム理解をする必要があります

正直、ドキュメントを読むことが目的ではないですが、きちんと理解しないと手戻りが発生して余計な時間がかかることもしばしば

特に自分の場合、ドキュメントを読んでも何が大切か分からない場合が多い

そこで、ローカルで実行したりすぐにエラーになるようなプログラムであれば、動かして詰まったところのドキュメントを読むようにしています

そんな中で、今の仕事は立ち上げてから少し経った程度のタスク

そのため、ドキュメントは存在するが最新状態にアップデートされていなかったり複数の場所に関連するドキュメントが保存されている場合もあります

そこで、自分で必要な情報をまとめ直す必要が出てきます

最初はコピペして、自分の分かりやすい表現や書き方に修正することで理解を目指してきました

しかし、文字の羅列がメインになってしまい後から見た時に視覚のフックがありません

それに文字情報だけだと目が滑るのも事実

スクショを入れたりして対応していますが、流れ図を作成した方がわかりやすいと思いました

そこで、mermaidの出番、というわけです

mermaidの使い方

mermaid自体は簡単にできます。

先ほどまで作っていた自分の言葉をまとめたテキストをLLMに投げます

そこで、mermaidのコードを生成してもらいます

特殊文字を使ったりするとエラーになるのでそれを修正したり、同じグループは色をつけて囲ってもらったり

その結果、見やすい流れ図か文字から簡単に作成できます

自分の場合は視覚化されていた方が圧倒的に頭に残るのでobsidainのメモには大量のmermaidが入っている状態です

これの良いところは

  1. 自分の言葉で情報は整理する必要がある

  2. それが視覚化されるので理解が早い

ところにあります

さらに先輩に自分の理解があっているか説明する際にも分かりやすく認識のズレがなくせます

ということでmermaidを使って素早く理解して本質的な業務に勤しもう!

最後に

大量にマーメイドを使うわけですが、毎回同じ形ばかりなのでそろそろ別の方法を模索したいです

mermaidで視覚化した方がわかりやすい

著者

semiramisu

公開日

2025 - 06 - 02

ライセンス CC BY-NC-SA 4.0