生成AI時代の必須教養であるマーメイドについて解説

講義で生成AI時代の必須教養であるマーメイドについて解説しました、
ビデオはこちら：https://youtu.be/YNxuNMzdiMQ
#エージェント #AI #生成AI #講義 #LLM
@サプライ・チェイン最適化チャンネル（MIKIO KUBO)
https://www.moai-lab.jp/
https://youtube.com/@kubomikio
https://x.com/MickeyKubo

Transcript

1. mermaid Mermaid を使ってみよう！ Markdown でかんたんに図を描画 Mermaid は、テキストベースの記述から様々な種類の図を生成できるツールです。 Marp はMermaid をサポートしており、スライド内に直接図を描画できます。 このスライドで学ぶこと: Mermaid の基本的な使い方 代表的な図（フローチャート、シーケンス図など）の描き方 基本的な使い方 Marp スライド内でMermaid を使うには、コードブロックの言語指定子に mermaid を使用します。 ```mermaid graph LR A[Markdown記述] --> B{Mermaidレンダリング}; B --> C[グラフ表示 ✨]; Markdown 記述 Mermaid レンダリング グラフ表示✨ フローチャート (Flowchart) ① 基本 プロセスや処理の流れを図示するのに便利です。 Markdown 記述例: ```mermaid graph LR; A[開始] --> B(処理1);
2. B --> C{条件分岐}; C -- Yes --> D[処理2]; C -- No --> E[終了]; D --> E; 生成されるグラフ: Yes No 開始 処理1 条件分岐 処理2 終了 graph LR は左から右への流れを示します。 (TD: 上から下) --> で矢印を繋ぎます。 ノードID[表示テキスト] や ノードID(表示テキスト) で形を変えられます。 フローチャート (Flowchart) ② 矢印とノード 矢印の種類やノードの形を変えることができます。 Markdown 記述例: ```mermaid graph TD; A[角丸四角] --> B(円); A -- 点線 --> C((二重円)); A -.-> D{ひし形}; A ==> E>非対称]; F[/平行四辺形/] --- G[/台形\\]; 生成されるグラフ: 点線 角丸四角 円 二重円 ひし形 非対称 平行四辺形 台形\
3. シーケンス図 (Sequence Diagram) オブジェクト間のメッセージのやり取りを時系列で示します。 Markdown 記述例: ```mermaid sequenceDiagram participant A as アリス participant B as ボブ A->>B: こんにちは！元気？ activate B B-->>A: 元気だよ！ありがとう！ deactivate B A->>B: よかった！ 生成されるグラフ: ボブ アリス ボブ アリス こんにちは！元気？ 元気だよ！ありがとう！ よかった！ ->> は実線の矢印、 -->> は破線の矢印です。 activate / deactivate で処理中の表現ができます。 ガントチャート (Gantt Chart) プロジェクトのスケジュールやタスクの進捗を視覚化します。 Markdown 記述例: ```mermaid gantt dateFormat YYYY-MM-DD
4. title プロジェクトスケジュール section 設計 設計タスク1 :a1, 2024-07-01, 7d 設計タスク2 :after a1, 5d section 開発 開発タスク1 :crit, b1, 2024-07-08, 10d 開発タスク2 :after b1, 5d section テスト テストタスク :c1, after b2, 7d 生成されるグラフ: 2024-07-01 2024-08-01 2024-09-01 2024-10-01 2024-11-01 2024-12-01 2025-01-01 2025-02-01 2025-03-01 2025-04-01 2025-05-01 設計タスク1 設計タスク2 開発タスク1 開発タスク2 テストタスク 設計 開発 テスト プロジェクトスケジュール クラス図 (Class Diagram) システムのクラス構造、属性、メソッド、クラス間の関係を示します。 Markdown 記述例: ```mermaid classDiagram class Animal { +String name +int age +void eat() +void sleep() } class Dog { +String breed +void bark() } class Cat { +void meow()
5. } Animal <|-- Dog : 継承 Animal <|-- Cat : 継承 生成されるグラフ: 継承 継承 Animal +String name +int age +void eat() +void sleep() Dog +String breed +void bark() Cat +void meow() 状態遷移図 (State Diagram) オブジェクトやシステムが取りうる状態と、状態間の遷移を示します。 Markdown 記述例: ```mermaid stateDiagram-v2 [*] --> Stopped : Start Stopped --> Running : Start Event Running --> Stopped : Stop Event Running --> Suspended : Suspend Event Suspended --> Running : Resume Event Suspended --> Stopped : Stop Event state Running { [*] --> Task1 Task1 --> Task2 : Complete Task2 --> [*] : Finish }
6. 生成されるグラフ: Start Stop Event Start Event Stop Event Suspend Event Resume Event Stopped Running Complete Finish Task1 Task2 Suspended 円グラフ (Pie Chart) 全体の構成比率を視覚的に示します。 Markdown 記述例: ```mermaid pie title 好きな果物 "りんご" : 35 "バナナ" : 25
7. "オレンジ" : 20 "その他" : 20 生成されるグラフ: 35% 25% 20% 20% 好きな果物 りんご バナナ オレンジ その他 まとめ Marp 内で ```mermaid ... ``` を使うと簡単に図を描画できます。 フローチャート, シーケンス図, ガントチャート, クラス図, 状態遷移図, 円グラフ など、様々な図に 対応しています。 テキストベースなので、バージョン管理も容易です。 さらに詳しく知りたい場合: Mermaid 公式ドキュメント: https://mermaid.js.org/ ぜひ、ドキュメント作成やプレゼンテーションにMermaid を活用してみてください！