メインコンテンツへスキップ
  1. サンプル/

ダイアグラムとフローチャート

2 分·
Mermaid Sample Diagram Shortcodes
Blowfish
著者
Blowfish
強力で、軽量な Hugo のテーマです。
目次

Mermaid 図は mermaid ショートコードを使うことで Blowfish でサポートされています。ダイヤグラムのマークアップをショートコードを囲むだけです。 Blowfish は設定された colorScheme パラメータに合うように自動T系に Mermaid ダイヤグラムをテーマ化します。

mermaid ショートコード 資料にてより詳細を参照できます。

以下の例は Mermaid 公式資料 から抜粋した一分です。GitHub のページソース でマークアップを確認することができます。

フローチャート
#

graph TD
A[クリスマス] -->|収入| B(買い物にいく)
B --> C{考える}
B --> G[/他/]
C ==>|1| D[ノートパソコン]
C -->|2| E[iPhone]
C -->|3| F[車]
subgraph セクション
C
D
E
F
G
end

順序図
#

sequenceDiagram
autonumber
par 行動 1
アリス->>ジョン: こんにちはジョン、お元気ですか?
and 行動 2
アリス->>ボブ: こんにちはボブ、お元気ですか?
end
アリス->>+ジョン: こんにちはジョン、お元気ですか?
アリス->>+ジョン: ジョン、聞こえていますか?
ジョン-->>-アリス: こんにちはアリス、聞こえています!
Note right of ジョン: ジョンは察しがよい
ジョン-->>-アリス: とても気分がいいです!
loop 毎分
ジョン-->アリス: すばらしい!
end

クラス図
#

classDiagram
Animal "1" <|-- Duck
Animal <|-- Fish
Animal <--o Zebra
Animal : +int age
Animal : +String gender
Animal: +isMammal()
Animal: +mate()
class Duck{
+String beakColor
+swim()
+quack()
}
class Fish{
-int sizeInFeet
-canEat()
}
class Zebra{
+bool is_wild
+run()
}

主従関係図
#

erDiagram
CUSTOMER }|..|{ DELIVERY-ADDRESS : has
CUSTOMER ||--o{ ORDER : places
CUSTOMER ||--o{ INVOICE : "liable for"
DELIVERY-ADDRESS ||--o{ ORDER : receives
INVOICE ||--|{ ORDER : covers
ORDER ||--|{ ORDER-ITEM : includes
PRODUCT-CATEGORY ||--|{ PRODUCT : contains
PRODUCT ||--o{ ORDER-ITEM : "ordered in"

関連記事

図表
1 分
Chart Sample Graph Shortcodes
ショートコード
17 分
Shortcodes Mermaid Icon Lead Docs
絵文字 🪂
1 分
Emoji Sample