チャートと図の表現力

mybook では Mermaid を使って多彩な図を描画できます。ここではさまざまな種類のダイアグラムを紹介します。

フローチャート（基本）

処理の流れをシンプルに表現します。

シーケンス図

コンポーネント間のやり取りを時系列で示します。

クラス図

オブジェクト指向の設計を可視化します。

状態遷移図

アプリケーションの状態変化を表します。

ER図

データベースの構造を表現します。

Gitグラフ

ブランチ戦略を可視化します。

パイチャート

割合をわかりやすく表示します。

Callout コンポーネントの例

GFM テーブル

Mermaid 以外にも、GFM テーブルで情報を整理できます。

コードブロック（比較用）

通常のコードブロックがMermaidの変換で壊れていないか確認します。

interface Topic {
  slug: string;
  title: string;
  description?: string;
  order: number;
}
 
function getTopicUrl(topic: Topic): string {
  return `/${topic.slug}`;
}

{
  "title": "チャートと図の表現力",
  "description": "Mermaid サンプル集",
  "order": 3
}