ASCII Mermaid ガイド
ASCII Mermaid 図の作成の基本を学べます。このガイドでは、最もよく使われる図の種類を簡単な例で紹介します。
基本的なフローチャート
フローチャートは、最も一般的な図の種類の 1 つで、処理や意思決定の流れを表します。
コード：
```mermaid
graph TD
A[Start] --> B{Decision}
B -->|Yes| C[Action]
B -->|No| D[End]
C --> D
```ASCII プレビュー：
図をレンダリングできませんでした
状態遷移図
状態遷移図は、システムのさまざまな状態と、それらの間の遷移を表します。
コード：
```mermaid
stateDiagram-v2
[*] --> Idle
Idle --> Processing: start
Processing --> Complete: done
Complete --> [*]
```ASCII プレビュー：
図をレンダリングできませんでした
シーケンス図
シーケンス図は、オブジェクト間の時間に沿ったやり取りを表します。
コード：
```mermaid
sequenceDiagram
Alice->>Bob: Hello Bob!
Bob-->>Alice: Hi Alice!
Alice->>Bob: How are you?
Bob-->>Alice: Great, thanks!
```ASCII プレビュー：
図をレンダリングできませんでした
クラス図
クラス図は、オブジェクト指向システムの構造を表します。クラスの属性とメソッド、継承関係（<|-- を使用）、関連を示します。
コード：
```mermaid
classDiagram
Animal <|-- Duck
Animal <|-- Fish
Animal: +int age
Animal: +String gender
Animal: +isMammal() bool
Animal: +mate()
Duck: +String beakColor
Duck: +swim()
Duck: +quack()
Fish: -int sizeInFeet
Fish: +canEat()
Fish: +swim()
```ASCII プレビュー：
図をレンダリングできませんでした
ER 図（エンティティ関連図）
ER 図は、エンティティ（テーブル）とそれらの間の関係を示して、データベースの構造をモデル化します。注：ASCII レンダリングで完全に表示されるよう、関係のラベルには英語を使用してください。
コード：
```mermaid
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE_ITEM : contains
PRODUCT ||--o{ LINE_ITEM : "is in"
```ASCII プレビュー：
図をレンダリングできませんでした
XY 棒グラフ
XY チャートは、カテゴリごとの量的データを表示します。棒グラフは、異なるカテゴリや期間の値を比較するのに最適です。
コード：
```mermaid
xychart-beta
title "Monthly Sales"
x-axis [Jan, Feb, Mar, Apr, May, Jun]
y-axis "Revenue" 0 --> 10000
bar [5000, 6200, 7500, 8200, 7800, 9500]
```ASCII プレビュー：
図をレンダリングできませんでした
XY 折れ線グラフ
折れ線グラフは、時間の経過や順序のあるカテゴリにわたる傾向や変化を可視化し、パターンや推移を見つけやすくします。
コード：
```mermaid
xychart-beta
title "Monthly Growth"
x-axis [Jan, Feb, Mar, Apr, May, Jun]
y-axis "Score" 0 --> 100
line [20, 35, 45, 60, 75, 90]
```ASCII プレビュー：
図をレンダリングできませんでした
公式デモをもっと見る
上の例は、最も一般的な使い方をカバーしています。高度なフローチャート、複合状態、OAuth フロー、ER スキーマ、XY オーバーレイ、スプリントのバーンダウンなど、すべての図の種類にわたる実用的なサンプルは、beautiful-mermaid の公式デモギャラリーをご覧ください。
すべての公式デモを見る →デモサイトは beautiful-mermaid ライブラリの作者が管理しており、サポートされている構文の全範囲を紹介しています。