【AI時代の図形】ハードウェア・構文系3選 — WaveDrom・Railroad Diagram・Bytefield徹底比較

当サイトを閲覧いただきありがとうございます。本記事はAI時代にコード管理できる図形シリーズの第5回として、ハードウェア・構文系のニッチな3種を比較解説します。シリーズ全体の一覧は完全ガイドをご覧ください。

この記事はかなりニッチな内容です。デジタル回路のタイミング図、プログラミング言語の構文図、ネットワークパケットの構造図 — これらが何のことか分からない方は、読み飛ばして次の記事に進んでいただいて問題ありません。

逆に、ハードウェア設計やプロトコル仕様書に関わる方にとっては「これをコード管理できるツールがあったのか」と発見のある内容になっていると思います。ニッチゆえに従来は手描きやExcelで作られがちだったこれらの図も、コードで定義すればAIに生成・更新を任せられるようになり、仕様変更のたびに図を描き直す手間から解放されます。

3種比較表

WaveDrom — デジタル回路のタイミング図

WaveDromはデジタル回路のタイミング図（波形図）をJSON記法で描画する専用ツールです。クロック信号やデータバスの時系列変化を表現する図で、ハードウェア設計や通信プロトコルの仕様書では欠かせないものです。

ブラウザ上で動作するエディタも提供されており、リアルタイムプレビューで波形を確認しながら編集できます。

サンプル：クロック信号とデータ転送

{ "signal": [
  { "name": "clk",  "wave": "p........" },
  { "name": "data", "wave": "x.345x...", "data": ["A", "B", "C"] },
  { "name": "req",  "wave": "0.1..0..." },
  { "name": "ack",  "wave": "0..1..0.." }
]}

wave フィールドの1文字が1クロックサイクルに対応します。p はポジティブエッジクロック、0/1 はLow/High、x は不定、. は前の値の継続です。

サンプル：SPI通信プロトコル

{ "signal": [
  { "name": "SCK",  "wave": "0.p......p...." },
  { "name": "MOSI", "wave": "x.=.=.=.=.x...", "data": ["MSB", "", "", "LSB"] },
  { "name": "MISO", "wave": "x.=.=.=.=.x...", "data": ["MSB", "", "", "LSB"] },
  { "name": "SS",   "wave": "10........1..." }
],
  "config": { "hscale": 2 }
}

サンプル：レジスタマップ

WaveDromにはレジスタ（ビットフィールド）の描画機能もあります。

{ "reg": [
  { "bits": 8,  "name": "data",   "attr": "RW" },
  { "bits": 4,  "name": "addr",   "attr": "RW" },
  { "bits": 1,  "name": "wr" },
  { "bits": 1,  "name": "rd" },
  { "bits": 1,  "name": "en" },
  { "bits": 1,  "name": "rsv",    "type": 1 }
],
  "config": { "bits": 16, "lanes": 1 }
}

メリット・デメリット

デジタル回路やプロトコル設計に関わらない人にはまず出番がないツールです。wave フィールドの1文字記法（p 0 1 x .）も独特で、慣れるまではちょっと読みにくい。

ただ、タイミング図の定番ツールです。JSON記法で書けるので構造化データとして管理しやすく、レジスタマップの描画機能まで内蔵しています。ハードウェアエンジニアやプロトコル仕様書を書く立場の人にとっては、知っておくべきツールです。

AIとの相性

JSON形式なのでAIが生成しやすいのですが、wave フィールドの1文字記法（p 0 1 x .）は独特で、タイミングの長さを間違えることがあります。一方で、SPI・I2C・UARTのような定型的な通信プロトコルは仕様が明確なので、「I2C通信のタイミング図をWaveDromで」と依頼すると高精度な出力が期待できます。カスタムプロトコルのタイミング図は手動調整が前提です。

Railroad Diagram — 構文・文法の鉄道図

Railroad Diagramはプログラミング言語の文法やデータフォーマットの構文を視覚的に表現する図です。鉄道の路線図に似た見た目からこの名前がつけられました。SQLの構文リファレンスやJSONの仕様書で見かけたことがある方も多いのではないでしょうか。

左から右に「列車が走る」ようにたどることで、有効な構文パターンを理解できます。分岐は選択肢、ループは繰り返し、バイパスは省略可能な要素を表現します。

サンプル：SELECT文の構文

import { Diagram, Sequence, Choice, Optional, OneOrMore,
         Terminal, NonTerminal } from 'railroad-diagrams';

const selectStatement = Diagram(
  Terminal('SELECT'),
  Choice(0,
    Terminal('*'),
    OneOrMore(NonTerminal('column'), Terminal(','))
  ),
  Terminal('FROM'),
  NonTerminal('table'),
  Optional(
    Sequence(
      Terminal('WHERE'),
      NonTerminal('condition')
    )
  ),
  Optional(
    Sequence(
      Terminal('ORDER BY'),
      NonTerminal('column'),
      Choice(0, Terminal('ASC'), Terminal('DESC'))
    )
  )
);

Choice で選択肢、Optional で省略可能、OneOrMore で繰り返しを表現します。

サンプル：JSONの構文

const jsonValue = Diagram(
  Choice(0,
    NonTerminal('string'),
    NonTerminal('number'),
    NonTerminal('object'),
    NonTerminal('array'),
    Terminal('true'),
    Terminal('false'),
    Terminal('null')
  )
);

メリット・デメリット

SQLやJSONの構文リファレンスで鉄道図を見たことがある人は多いと思いますが、あれをコードから生成できるのがこのライブラリです。BNFやEBNFのテキスト記述を見て理解するより、図を目でたどった方がはるかに早いのは間違いありません。SQLite、PostgreSQL、JSON Schemaの公式ドキュメントでも採用されています。

構文・文法の表現以外には使えない完全特化型で、ライブラリの選択肢も railroad-diagrams のJavaScript/Python版くらいしかありません。また、文法が複雑すぎると図自体が横に長くなって読みにくくなるので、適度に分割する工夫が必要です。

AIとの相性

LLMはプログラミング言語の文法やBNFの知識が豊富なので、「SQLのSELECT文の構文図を railroad-diagrams ライブラリで」のように依頼すると、Terminal NonTerminal Choice Optional を使った構造的なコードが返ってきます。文法の正確さはLLMの得意分野なので、構文の抜け漏れも少ないです。

Bytefield-svg — バイトフィールド図

Bytefield-svgはネットワークプロトコルやバイナリフォーマットのフィールド構造をSVGで図解するツールです。RFCドキュメントでよく見かける、ビットやバイト単位でフィールドを区切った図を、コードから生成できます。

サンプル：TCPヘッダ

(def boxes-per-row 32)
(def box-width 20)

(draw-column-headers)
(draw-box "Source Port" {:span 16})
(draw-box "Destination Port" {:span 16})
(draw-box "Sequence Number" {:span 32})
(draw-box "Acknowledgment Number" {:span 32})
(draw-box "Offset" {:span 4})
(draw-box "Reserved" {:span 3})
(draw-box "Flags" {:span 9})
(draw-box "Window Size" {:span 16})
(draw-box "Checksum" {:span 16})
(draw-box "Urgent Pointer" {:span 16})

サンプル：簡易パケット構造

(def boxes-per-row 8)

(draw-column-headers)
(draw-box "Version" {:span 4})
(draw-box "Type" {:span 4})
(draw-box "Length" {:span 8})
(draw-box "Payload" {:span 8 :borders #{:left :right :top}})
(draw-gap "...")
(draw-box "Checksum" {:span 8})
(draw-bottom)

draw-gap で可変長フィールドを表現できます。

メリット・デメリット

3ツールの中で最もニッチです。ネットワークプロトコルやバイナリフォーマットの仕様書を書く人以外には、おそらく一生使う機会はないでしょう。Clojure風の独自DSLも取っつきにくく、利用者コミュニティも小さいので情報が限られます。

それでも紹介する理由は、RFC準拠のバイトフィールド図をコードから生成できるツールがほぼこれしかないからです。PowerPointで手描きしていたビットフィールド図がコード管理できるようになるだけでも、仕様変更時の作業量が大幅に減ります。

AIとの相性

Clojure風の独自DSLかつ利用者が少ないので、AIの学習データにBytefield-svgのコードはほとんど含まれていないと思われます。試してみるとTCPヘッダのような超定番のプロトコルはそれらしい出力が得られることもありますが、カスタムフォーマットの場合は公式ドキュメントを見ながら手書きした方が速いです。

選定ガイド

導入方法

WaveDrom

ブラウザでWaveDrom公式エディタにアクセスするだけで使えます。

# npm
npm install wavedrom
npx wavedrom-cli -i input.json -s output.svg

Railroad Diagram

# JavaScript
npm install railroad-diagrams

# Python
pip install railroad-diagrams

Bytefield-svg

npm install -g bytefield-svg
echo '(draw-column-headers)(draw-box "Test" {:span 16})(draw-bottom)' | bytefield-svg > output.svg

この記事に関連する記事

まとめ

本記事ではAI時代のコード管理図形として、ハードウェア・構文系のニッチな3種を比較解説しました。如何だったでしょうか。

この3つに共通するのは、汎用性を捨てた代わりにその領域では代替がほぼないという点です。使う場面は限られますが、必要になったときにこれらのツールを知っているかどうかで作業効率が変わってきます。

タイミング図ならWaveDrom、構文図ならRailroad Diagram、バイトフィールド図ならBytefieldと、必要に応じて選んでください。

次回はデータ可視化（Vega-Lite、Chart.js、Recharts、Observable Plot）について解説します。

シリーズ目次 → 『AI時代の図形』完全ガイド

各ツールの詳細は公式サイトも参考にしてください：WaveDrom / railroad-diagrams / Bytefield-svg

それでは次の記事も閲覧いただけると幸いです。