Markdown AIにMermaid登場！最新アップデートで図解を簡単に！
Markdown AIにMermaidが追加！
2024年12月9日、Markdown AIに新たな機能として 「Mermaid記法」 が追加されました！これにより、 簡単にグラフやチャート、シーケンス図などを作成・共有できるようになりました。
Mermaid記法とは？
Mermaid記法は、フローチャート、ガントチャート、シーケンス図、パイチャートなどをテキストベースで簡単に作成できる記法です。
これを使えば、PowerPointなどのツールを使用しなくても文言だけで簡単に図などを制作できます。
例えば、
```mermaid
pie
title Resource Allocation
"Development": 40
"Marketing": 25
"Operations": 20
"Management": 15
```
上記をMarkdown AIに記述すると、以下のようなグラフが生成されます。
このように、簡単な記述で視覚的にわかりやすい資料を作ることができます！
Mermaidの簡単なルール
ルール１：
頭に バッククオート（`）３つとmermaidと記述、終わりにバッククオート（`）３つ
```mermaid
<ここに内容を書く>
```
ルール2：何の図を書くかを最初に書く
フローチャート → graph
シーケンス図 → sequenceDiagram
ガントチャート → gantt
パイチャート → pie
ルール3：箱（ノード）を作る
四角い箱: A[これが四角い箱表記]
ダイヤモンド（条件分岐）: B{ここで分岐}
ルール4：箱と箱をつなぐ矢印を書く
矢印を書くときは、--> を使う。
例： A --> B
ルール5：説明を足す
矢印に「はい」や「いいえ」をつけたいとき：
A -- はい --> B
Mermaidの基本的な使い方は以上になります！
Mermaidで作成できる図の種類
Mermaid記法を使うと、さまざまな図が作成できます！
フローチャート（Flowchart）
用途:
プロセスやワークフロー、条件分岐の流れを視覚化するのに使用します。
※graphの後の「TD」は（Top to Down）の略で、上から下へ」の流れ（縦向き）を意味します。
```mermaid
graph TD;
A[開始] --> B{条件};
B -- はい --> C[処理1];
B -- いいえ --> D[処理2];
C --> E[終了];
D --> E[終了];
```
2. シーケンス図（Sequence Diagram）
用途:
システム間や参加者間のやり取り（メッセージの流れ）を表現します。APIの通信やユーザーとサーバーのやり取りを説明するのに便利です。
```mermaid
sequenceDiagram
participant A as ユーザー
participant B as サーバー
A->>B: データをリクエスト
B-->>A: データを返す
```
ガントチャート（Gantt Chart）
用途:
プロジェクト計画やタスクスケジュールを視覚的に管理します。
```mermaid
gantt
title プロジェクト計画
section 準備
設計: done, des1, 2024-01-01, 3d
開発: active, dev1, after des1, 10d
テスト: test1, after dev1, 5d
```
パイチャート（Pie Chart）
用途:
データの割合を視覚化するのに使用します。
```mermaid
pie
title 予算配分
"開発": 40
"マーケティング": 30
"運用": 20
"管理": 10
```
Markdown AIでのMermaidの使い方
Markdown AIでMermaid記法を使用する際も上記と一緒の記述で図が作成できます！
Mermaid記法のメリット
- シンプルで直感的な記法：HTMLやグラフィックソフトを使わずに図を作成可能
- 動的なデータ対応：数値を変更するだけで即座に更新
- ドキュメントの一貫性：Markdown形式でコードと図を一元管理できる
- 視覚的にわかりやすい：チーム内の情報共有がスムーズに
最後に
今回アップデートでMarkdown AIは、より実務でも使いやすく進化しました！
技術資料や計画書を作成しやすくなったので、ぜひMarkdown AIでMermaid記法を試してみてください！
【Markdwon AI公式ツール】
Discussion