LoginSignup
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

AI時代の相棒は、キミに決めた！ 推しのAIエージェントをシェアしよう！
@kaizen_nagoya(Dr. Kiyoshi Ogawa)

Mermaid調べ始めた。timing diagram対応 by ChatGPT

Last updated at Posted at 2025-08-22

Marmaid

ソースコードと図の相互自動生成するのに、状態遷移図と時系列図と刻時図があれば、ほとんど網羅する。

あるUMLツールが最近まで刻時図がなかった。Mermaidもそうらしい。
なぜなんだろう。

全人類に伝えたいマーメイド記法
https://qiita.com/hirokiwa/items/7a9ae5fb87958783bd82

状態遷移図

mermaid
graph LR
	A((S1))--1/1-->B((S2))
	B--1/1-->C((S3))
	C--1/1-->A
	A--0/0-->A
	B--0/0-->B
	C--0/0-->C

電源投入時にどこから始めてもよかったり、電源断時に、どこで終わってもいい状態遷移の場合は、始点と終点はなくてもいい。

時系列図

mermaid
sequenceDiagram
    App ->>+ API: GET /user:id
    API ->>+ Server: auth
    Server->>-API: user-data
    alt 200
        API->>App:OK
    else 400
        API->>-App:error
    end

返信を破線にするとわかりやすいかも。

timing diagram

Issue #1239 · mermaid-js/mermaid - timing diagram
https://github.com/mermaid-js/mermaid/issues/1239&ved=2ahUKEwjutNOLjJ6PAxU8ZvUHHd2YEFsQFnoECBwQAQ&usg=AOvVaw09K4RTryWlLEndvD5BuitT

２年前にApploved. Contributor Needed.

FPGA設計者は欲しいって言ってる。論理回路では必須、プログラムでも論理を時間的に追うなら必須なんです。

Mermaid on Qiita

PlantUML - mermaid UML 比較（シーケンス図）
https://qiita.com/goya-hideaki/items/d149782b633f155de48a

ChatGPT

mermaid とPlant UMLの損得を比較してください。

ChatGPT:

いいテーマですね 👍
Mermaid と PlantUML は、どちらも「テキストで図を描ける」ツールですが、思想や得意分野に差があります。以下、損得比較を整理します。
🌱 Mermaid vs 🌿 PlantUML — 損得比較

  1. 導入・環境依存
    Mermaid
    MarkdownやGitHub、Notion、Obsidian、Qiitaなどでそのまま埋め込める
    ブラウザ上で動く → インストール不要
    Java不要なので環境に優しい
    PlantUML
    Javaベース → Java環境必須
    独立した描画サーバやGraphvizの導入が必要な場合あり
    ただしEclipse/IntelliJなどIDE連携が充実
    📌 結論：手軽さはMermaid、開発現場への統合度はPlantUMLが有利
  2. 表現力・サポートする図の種類
    Mermaid
    流れ図、シーケンス図、ガントチャート、クラス図、状態遷移図など
    主要図はカバーしているが、細かい装飾や特殊な図法には弱い
    PlantUML
    UML全般を網羅（ユースケース図、コンポーネント図、デプロイメント図なども可）
    企業システム開発・アーキテクチャ設計では強み
    DSLが豊富で「ドキュメント世代」も視野に入る
    📌 結論：シンプルなドキュメント用途ならMermaid、フルUML活用ならPlantUML
  3. 描画品質・カスタマイズ
    Mermaid
    モダンで見やすいが、カスタマイズ幅は少なめ
    配置制御は弱い → 大規模図では崩れることも
    PlantUML
    デザインは素朴だが、細かいスタイル指定可能
    大規模図でも安定してレイアウト可能
    📌 結論：見栄えを手軽に得るならMermaid、厳密な制御ならPlantUML
  4. コミュニティ・エコシステム
    Mermaid
    GitHubが公式サポート → IssueやPRが活発
    JavaScript系のツールとの相性が良い
    PlantUML
    歴史が長く、UMLユーザーやIDEプラグインが豊富
    エンタープライズ寄り
  5. 適用場面の目安
    Mermaidが向くケース
    Qiita記事やMarkdownドキュメントにサッと図を入れたい
    OSSやWebエンジニアのプロジェクトで図を共有
    インフラ・アジャイル開発での軽量設計図
    PlantUMLが向くケース
    UMLに忠実な設計図が必要
    大規模システム開発でレビュー資料や設計書を大量に生成
    IDEやCI/CDと統合してドキュメント自動生成
    ✅ まとめ（損得バランス）
    Mermaid：導入簡単・軽量・見やすいが、図の表現力は限定的
    PlantUML：強力・網羅的・柔軟だが、導入に一手間かかる
    👉 「軽さでドキュメントにすぐ使うならMermaid」「厳密な設計ドキュメントならPlantUML」 が実務での最適解になりやすいです。
    もしQiita記事にするなら、**同じ図を両方で書いた比較例（シーケンス図やクラス図）**を並べるとわかりやすいのですが、次にそのデモを作ってみましょうか？

mermaidでtiming diagramを書くにはどうしたらいいですか。

ChatGPT:

良い質問です 👍
実は Mermaidには timing diagram（タイミングチャート）専用の構文はまだありません（2025年8月時点）。
ただし、いくつかの工夫で代替できます。

  1. 公式サポート状況
    Mermaid公式ドキュメントでサポートされている図は
    flowchart / sequenceDiagram / classDiagram / stateDiagram / ER diagram / journey / gantt / pie / mindmap / timeline / quadrantChart など
    timing diagram（信号のハイローやクロック波形を表す図）は未実装
    GitHub Issue でも要望はありますが、まだ正式リリースされていません。
  2. 代替アプローチ
    (A) timeline を使う
    Mermaidには timeline がありますが、これは「歴史的イベントの並び」を書くためのもので、波形表現には弱いです。
    ただ、時系列を見せたいだけなら使えます。
    timeline
    title タイミング例（簡易）
    0: CLK=↑
    1: CLK=↓
    2: DATA=1
    3: DATA=0
    4: ACK=1
    (B) gantt を使う
    gantt チャートで信号線のオン/オフを「タスクの開始・終了」として表す方法があります。
    gantt
    title 簡易タイミング図
    dateFormat X
    axisFormat %L
    section CLK
    High :done, 0, 1
    Low :active, 1, 2
    High :done, 2, 3
    Low :active, 3, 4
    section DATA
    D=1 :done, 1, 2
    D=0 :active, 2, 4
    section ACK
    A=1 :done, 3, 4
    これで「時間軸に沿ったハイロー変化」を それっぽく表現できます。
    (C) PlantUMLやWaveDromに委譲
    PlantUMLには @startuml @enduml で timing diagram サポートがあり、波形をきれいに描けます。
    WaveDrom は JSON記法で信号波形を描画できる専用ツールで、電子回路向きです。
    👉 どうしても「正確なデジタル波形」を描きたいなら、Mermaidではなく WaveDromやPlantUML を使った方が良いです。
  3. 結論
    Mermaid単体では タイミング図をネイティブに描けない
    代替は gantt で擬似的に表現
    本格的なハードウェア設計資料では PlantUML timing diagram or WaveDrom を推奨
    ご希望なら、同じタイミング図を Mermaid（gantt擬似版）と PlantUML（ネイティブ版）と WaveDrom（専用版）で比較するサンプルを作ってみましょうか？

はい。お願いします。

ChatGPT:

了解しました！
同じ「CLK / DATA / ACK」の簡単なタイミング図を、
Mermaid（gantt擬似版）
PlantUML（ネイティブ timing diagram）
WaveDrom（専用ツール）
で書き比べてみます。

  1. Mermaid（gantt擬似版）
    gantt
    title 簡易タイミング図 (Mermaid擬似版)
    dateFormat X
    axisFormat %L
    section CLK
    High :done, 0, 1
    Low :active, 1, 2
    High :done, 2, 3
    Low :active, 3, 4
    section DATA
    D=1 :done, 1, 2
    D=0 :active, 2, 4
    section ACK
    A=0 :done, 0, 3
    A=1 :active, 3, 4
    👉 時間の区切りをタスクで表現しているため、波形っぽく見えるが「台形」や「棒」のイメージになってしまう。
  2. PlantUML（ネイティブ timing diagram）
    @startuml
    robust "CLK" as CLK
    robust "DATA" as DATA
    robust "ACK" as ACK
    @0
    CLK is low
    DATA is 0
    ACK is 0
    @1
    CLK is high
    @2
    CLK is low
    DATA is 1
    @3
    CLK is high
    DATA is 0
    @4
    ACK is 1
    @enduml
    👉 PlantUMLの timing diagram 構文は波形を描画でき、デジタル回路図のように視覚的にわかりやすい。
  3. WaveDrom（専用波形描画ツール）
    { "signal": [
    { "name": "CLK", "wave": "p......." },
    { "name": "DATA", "wave": "01.0...." },
    { "name": "ACK", "wave": "0...1..." }
    ]}
    👉 WaveDromは波形専用。ブラウザやMarkdown対応環境で簡単にデジタル波形が出せる。
    p = クロック波形、0/1 = ロー・ハイ、. = 維持状態。
    まとめ
    Mermaid → 擬似的にはできる（お手軽だが本格的ではない）
    PlantUML → timing diagramサポートあり（ソフト開発ドキュメント向き）
    WaveDrom → 波形専用（ハード設計や仕様書に最適）
    ご希望なら、実際に 同じ波形のレンダリング結果を画像で出力して比較してみますか？

参照

ChatGPTによるQiita記事の改良と補足
https://qiita.com/kaizen_nagoya/items/20604d6dd0702ab95c2f

ChatGPTによるQiita記事の改良と補足（２）
https://qiita.com/kaizen_nagoya/items/996275307ffc8c1243f8

本から始める 面倒なことはChatGPTにやらせよう　by からあげ
https://qiita.com/kaizen_nagoya/items/f5ce2a18db54b5610e4b

MCP入門 〜面倒なことはAIエージェントにやらせよう〜 by からあげ を聞きながら
https://qiita.com/kaizen_nagoya/items/54b648c838fae8d57e38

【松尾研LLMコミュニティ】面倒なことはLLMにやらせよう "Beginning LLM"2024年10月17日 AI(9)
https://qiita.com/kaizen_nagoya/items/efdc23fbe67cdae2126e

設計:ChatGPTで特異解か一般解を求める AI(1)
https://qiita.com/kaizen_nagoya/items/4dec580e16a7c84b0ec4

みんなの使い方から学ぶ
https://qiita.com/kaizen_nagoya/items/8e7de492d896df94a36e

AI・機械学習　昨日、今日、明日
https://qiita.com/kaizen_nagoya/items/adb184c8fc7a65ac9756

DNA LLM and genome for survey 2200 papers by name.
https://qiita.com/kaizen_nagoya/items/ce8a28d6072f340a9d59

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?