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

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

·1 分
目次

Mermaid構文を mermaid で囲むだけで、Congoは設定された colorScheme に合わせて図を出力します。

詳細はショートコード - Mermaidを参照してください。

以下の例は、Mermaid公式ドキュメントから抜粋したものです。GitHubのページのソースを見るからもマークアップを見ることができます。

フローチャート #

Section
Get money
One
Two
Three
Let me think
Laptop
iPhone
Car
Another
Christmas
Go shopping

シーケンス図 #

BobJohnAliceBobJohnAlicepar[Action 1][Action 2]John is perceptiveloop[Every minute]Hello John, how are you?1Hello Bob, how are you?2Hello John, how are you?3John, can you hear me?4Hi Alice, I can hear you!5I feel great!6Great!7

クラス図 #

1
Animal
+int age
+String gender
+isMammal()
+mate()
Duck
+String beakColor
+swim()
+quack()
Fish
-int sizeInFeet
-canEat()
Zebra
+bool is_wild
+run()

ER図 #

CUSTOMERDELIVERY-ADDRESSORDERINVOICEORDER-ITEMPRODUCT-CATEGORYPRODUCThasplacesliable forreceivescoversincludescontainsordered in