使い方ガイド
Mermaidダイアグラムの書き方とツールの使い方を解説します
1. ツールの使い方
3つのステップで簡単に変換！
- 入力： テキストエリアにMermaidダイアグラムを含むMarkdownテキストを入力
- 変換：「Download ZIP」ボタンをクリック
- ダウンロード： 生成されたZIPファイルを自動ダウンロード
2. Mermaidダイアグラムの基本
Mermaidダイアグラムは、Markdownのコードブロック内に記述します。 言語指定を「mermaid」にすることで、ダイアグラムとして認識されます。
```mermaid
graph TD
A[開始] --> B[処理]
B --> C[終了]
```3. フローチャート（Flowchart）
最も基本的なダイアグラムです。処理の流れを視覚的に表現できます。
基本的な書き方
```mermaid
graph TD
A[開始] --> B{条件判定}
B -->|Yes| C[処理A]
B -->|No| D[処理B]
C --> E[終了]
D --> E
```ノード（図形）の種類
A[四角形]- 通常の処理B(丸括弧)- 角丸四角形C{ひし形}- 条件分岐D((二重丸))- 開始/終了
矢印の種類
-->- 実線の矢印-.->- 点線の矢印==>- 太線の矢印-->|テキスト|- ラベル付き矢印
4. シーケンス図（Sequence Diagram）
システム間のやり取りを時系列で表現するダイアグラムです。
```mermaid
sequenceDiagram
participant U as ユーザー
participant S as サーバー
participant DB as データベース
U->>S: リクエスト送信
S->>DB: データ取得
DB-->>S: データ返却
S-->>U: レスポンス返却
Note over U,S: 通信完了
```メッセージの種類
->>- 同期的メッセージ（実線）-->>- 応答メッセージ（点線）->>+- ライフライン開始->>-- ライフライン終了
5. クラス図（Class Diagram）
オブジェクト指向設計でクラスの構造と関係を表現します。
```mermaid
classDiagram
class Animal {
+String name
+int age
+makeSound()
}
class Dog {
+String breed
+bark()
}
class Cat {
+String color
+meow()
}
Animal <|-- Dog
Animal <|-- Cat
```関係の種類
<|--- 継承*--- コンポジションo--- 集約-->- 関連
6. 状態図（State Diagram）
システムやオブジェクトの状態遷移を表現します。
```mermaid
stateDiagram-v2
[*] --> 待機中
待機中 --> 処理中: 開始
処理中 --> 完了: 成功
処理中 --> エラー: 失敗
完了 --> [*]
エラー --> 待機中: リトライ
```7. ガントチャート（Gantt Chart）
プロジェクトのスケジュールを視覚的に表現します。
```mermaid
gantt
title プロジェクトスケジュール
dateFormat YYYY-MM-DD
section 企画
企画立案 :2024-01-01, 7d
要件定義 :7d
section 開発
設計 :2024-01-15, 10d
実装 :15d
テスト :7d
section リリース
デプロイ準備 :2024-02-20, 3d
本番リリース :1d
```8. 円グラフ（Pie Chart）
データの割合を円グラフで表現します。
```mermaid
pie title 言語別使用率
"JavaScript" : 40
"Python" : 30
"Java" : 20
"その他" : 10
```9. よくある質問（FAQ）
Q: 日本語は使えますか？
A: はい、ノードのラベルやテキストに日本語を使用できます。
Q: 画像のサイズは調整できますか？
A: 現在は自動でサイズが決定されます。将来的にカスタマイズ機能を追加予定です。
Q: 複数のダイアグラムを一度に変換できますか？
A: はい、1つのMarkdownファイルに複数のMermaidブロックを含めることができます。 それぞれが個別の画像ファイルとして生成されます。
Q: エラーが発生した場合は？
A: Mermaidの構文エラーの可能性があります。 コードブロックの記述を確認してください。 特に、インデントや記号の使い方に注意してください。
Q: 生成された画像の形式は？
A: PNG形式で高品質な画像が生成されます。 背景は透明で、どんな背景色のドキュメントにも使用できます。
10. さらに詳しく学ぶ
Mermaidの詳細な仕様や高度な使い方については、以下のリソースを参照してください：