Mermaid記法

シーケンス図、ガントチャート、クラス図、ステート図を例示してもらった。

シーケンス

code:EC.mmd

graph LR

B -->|商品をカートに追加| C(カート)

C -->|チェックアウト| D{支払い方法の選択}

D -->|銀行振込| E

code: gantt.mmd

gantt

title プロジェクトスケジュール

dateFormat YYYY-MM-DD

section セクションA

タスク1 :done, des1, 2024-01-01,2024-01-08

タスク2 : des2, after des1, 5d

section セクションB

タスク3 : des3, after des2, 5d

クラス図

code: class.mmd

classDiagram

クラスA <|-- クラスB: 継承

クラスA : +int id

クラスA : +String name

クラスB : +void method()

ステート図

code: state.mmd

stateDiagram-v2

ステート1 --> ステート2 : アクション1

ステート2 --> ステート3 : アクション2

おまけ:

code: oauth2.0-code.mmd

sequenceDiagram

participant ユーザー

participant クライアント

participant 認可サーバー

participant リソースサーバー

ユーザー->>クライアント: アクセス要求

クライアント->>認可サーバー: 認可リクエスト

認可サーバー->>ユーザー: 認証と認可

ユーザー->>認可サーバー: 認証と認可レスポンス

認可サーバー->>クライアント: 認可コード

クライアント->>認可サーバー: 認可コードとアクセストークンリクエスト

認可サーバー->>クライアント: アクセストークン

クライアント->>リソースサーバー: アクセストークンを使ったリクエスト

リソースサーバー->>クライアント: 要求されたデータ

Yahoo developer networkdでのOAuth2.0

code: yahoo-oauth2.0.mmd

sequenceDiagram

participant ユーザー

participant クライアント

participant Authorizationエンドポイント

participant Tokenエンドポイント

クライアント->>Authorizationエンドポイント: 認可リクエスト (client_id, redirect_uri, scope)

Authorizationエンドポイント->>ユーザー: ログインと認可要求

ユーザー->>Authorizationエンドポイント: ログインと認可レスポンス

Authorizationエンドポイント->>クライアント: 認可コード (リダイレクトURLにコード付きでリダイレクト)

クライアント->>Tokenエンドポイント: アクセストークンリクエスト (認可コード, client_id, secret)

Tokenエンドポイント->>クライアント: アクセストークンとリフレッシュトークン

よさそうなフローチャート作成ツール

https://gyazo.com/609b8611387ce6cddd743b838bfc00c6

こちらで、SVG作成できるよう。

exampleをみてると、

graph TD(TopDown) LR(LeftRight)

sequenceDiagram

gantt

の３種類のdiagram? graphがある。