🙌

ログからMermaidシーケンス図を自動生成する「log2mermaid」を作った

に公開

複数コンポーネントが絡む開発では、ログを追って「何が起きているか」を確認するだけでも 30 分以上かかることがザラにあります。

  • ログファイルは数千〜数万行
  • どのコンポーネントが、どの順番で動いたのかを目で追う
  • 必要があればホワイトボードにシーケンス図を描いて共有する

そこで、「ログ → シーケンス」に変換して視覚的に見えるようにすることで、何が起きているかを 5 分で把握できるツール「log2mermaid」を作成しました。

log2mermaid-cli
👉 https://github.com/yusan25c/log2mermaid-cli/
log2mermaid(デモサイト)
👉 https://yusan25c.github.io/log2mermaid/

仕組み

やっていることはシンプルです。

  1. match.csv に「タイトル・マッチさせたいキーワード・送信元(src)・送信先(dst)」を書く
  2. ログを1行ずつ読み、キーワードにマッチした行を拾う
  3. マッチ結果をもとに、MermaidのsequenceDiagram形式で出力

出力された結果をMermaid Live Editorなどに貼り付ければ、シーケンス図として可視化できます。

使い方イメージ

ログ(log.txt)

Nov  2 12:34:56 : [12345678.012345] hogehoge1
Nov  2 12:34:56 : [12345678.012345] hogehoge2
Nov  2 12:34:56 : [12345678.012345] Sample1 func:1245 requestMessage msg:helloWorld
Nov  2 12:34:56 : [12345678.012345] hogehoge3
Nov  2 12:34:56 : [12345678.012345] Sample2 State:0 -> 1
Nov  2 12:34:56 : [12345678.012345] hogehoge4
Nov  2 12:34:56 : [12345678.012345] Sample2 func:1245 requestMessage msg:helloWorld
Nov  2 12:34:56 : [12345678.012345] Sample3 State:0 -> 1
Nov  2 12:34:56 : [12345678.012345] hogehoge5
Nov  2 12:34:56 : [12345678.012345] hogehoge6
Nov  2 12:34:56 : [12345678.012345] Sample3 func:1245 notifyMessage val:0
Nov  2 12:34:56 : [12345678.012345] Sample2 func:1245 notifyMessage val:0
Nov  2 12:34:56 : [12345678.012345] hogehoge7

match.csv に例えば以下のように書いておく

title match src dst kind
requestMessage Sample1 .* requestMessage Sample1 Sample2 message
notifyMessage Sample2 .* notifyMessage Sample2 Sample1 message
requestMessage Sample2 .* requestMessage Sample2 Sample3 message
notifyMessage Sample3 .* notifyMessage Sample3 Sample2 message
State:Executing Sample2 State:.* -> 1 Sample2 note
state:Executing Sample3 State:.* -> 1 Sample3 note

log2mermaid実行

python3 log2mermaid.py log.txt match.csv

実行結果

sequenceDiagram
    autonumber
    participant Sample1
    participant Sample2
    participant Sample3
    Sample1 ->> Sample2: requestMessage<br/>L:3
    Note over Sample2: State:Executing<br/>L:5
    Sample2 ->> Sample3: requestMessage<br/>L:7
    Note over Sample3: state:Executing<br/>L:8
    Sample3 ->> Sample2: notifyMessage<br/>L:11
    Sample2 ->> Sample1: notifyMessage<br/>L:12

Mermaid Live Editorに結果を貼り付けて確認

正規表現にも対応

match.csv のキーワードには正規表現も使えます。

Sample1 .* requestMessage

のように書いておくと、「Sample1 func:1245 requestMessage msg:helloWorld」のような行をマッチさせることができます。

おわりに

log2mermaid は、あえてシンプルな実装にしてあります。

  • プロジェクトごとに match.csv を用意して運用する
  • 前処理スクリプトをかませてから log2mermaid に流す
  • CI などから自動で「ログ → Mermaid」を回してレビューに貼る

といった使い方も想定しています。
試してみて気になる点や要望があれば、GitHub の Issue やコメントで教えてもらえると嬉しいです。

Discussion