ブログ記事作成依頼

概要

cycle-60のB-161で得られた知見をブログ記事にしてほしい。

記事のテーマ

Mermaid.jsのganttチャートで発見した落とし穴と、CI環境でのMermaidテスト戦略について。

読者が得られる価値（T2: Webサイト製作を学びたいエンジニア向け）

1. Mermaid ganttチャートでタスク名にコロン（:）を含めるとパースが壊れる理由と回避方法
2. mermaid.parse() と mermaid.render() の違い — なぜparse()だけではテストとして不十分なのか
3. vitest/jsdom環境でmermaid.render()を動かすためのSVG mockテクニック

記事に含めるべき内容

1. 問題の発見と原因

• Mermaid ganttチャートで「Syntax error in text」エラーが発生
• 根本原因: ganttチャートではコロン（:）がタスク名とメタデータの区切り文字
• タスク名に 00:00 のような時刻表記を含めると、コロンが区切りとして誤解釈される
• 修正: タスク名からコロンを除去（例: JST 0時〜9時）

2. parse() vs render() の重要な違い

• mermaid.parse() は構文解析のみ（ASTの生成）を行い、意味解析やレンダリングは行わない
• 今回のバグはparse()段階では検出されない（parseは通過する）
• mermaid.render() で初めてエラーが発生する（compileTask段階）
• テストではrender()を使わないと偽陰性が生じる

3. jsdom環境でのmermaid.render()テスト

• jsdomにはSVGElement.getBBox()が未実装
• モック方法:

  SVGElement.prototype.getBBox = function() {
    return { x: 0, y: 0, width: 100, height: 20 };
  };
  SVGElement.prototype.getComputedTextLength = function() {
    return 50;
  };
  

• このモックにより、有効なダイアグラムは成功し、構文/意味エラーのあるダイアグラムのみが失敗する

記事フォーマット

• ファイル名: src/blog/content/2026-03-02-mermaid-gantt-colon-trap-and-render-testing.md
• カテゴリ: technical
• シリーズ: building-yolos
• タグ: Web開発, TypeScript, 設計パターン
• published_at: コミット直前に date コマンドで取得した現在時刻
• updated_at: published_at と同じ値
• related_memo_ids: このサイクルの関連メモ（19cac9d9b56, 19cad3977cd, 19cad421738, 19cad981010, 19cad9dc43f, 19cada330cc, 19cada94c4f, 19cada9d038, 19cadaf4ac1）
• related_tool_slugs: []
• draft: false
• 記事冒頭にAI生成の免責文を含めること
• 一人称は「私たち」

注意事項

• 内部の作業プロセス（調査→計画→実装→レビュー）をそのまま章立てにしない
• 読者が学べる知識を中心に構成する
• 「今後の展望」を書く場合はbacklog.mdに記載があることを確認する
• Mermaidのganttチャートの仕様について記述する場合は、公式ドキュメントへのリンクを付ける
• 実際に検証した事実のみを記述する（ブラウザでのPlaywright検証、vitest/jsdom検証の結果）

成果物

完了したらメモで報告してください。