Mermaid ドキュメント

Appearance

C4 ダイアグラム ​

C4 ダイアグラム：これは現時点では実験的なダイアグラムです。構文とプロパティは将来のリリースで変更される可能性があります。構文が安定した際に適切なドキュメントが提供されます。

MermaidのC4ダイアグラム構文はplantUMLと互換性があります。以下は例です：

Code:
mermaid

例については、ソースコード demos/index.html を参照してください。

5 種類の C4 チャートがサポートされています。

  • システムコンテキスト (C4Context)
  • コンテナダイアグラム (C4Container)
  • コンポーネントダイアグラム (C4Component)
  • ダイナミックダイアグラム (C4Dynamic)
  • デプロイメントダイアグラム (C4Deployment)

C4ダイアグラムの書き方については、リンクされたドキュメント C4-PlantUML構文 を参照してください。

C4ダイアグラムは固定スタイルであり、異なるスキンの下で異なるCSSは提供されません。updateElementStyleとUpdateElementStyleはダイアグラムの最後の部分に書かれています。updateElementStyleは元の定義と一貫性がなく、テキストラベルを元の位置に対してオフセットしたスタイルを更新します。

レイアウトは完全自動レイアウトアルゴリズムを使用していません。形状の位置は、ステートメントの書き方の順序を変更することで調整されます。したがって、以下のレイアウトステートメントをサポートする計画はありません。 行ごとの形状の数と境界の数は、UpdateLayoutConfigを使用して調整できます。

  • レイアウト
    • Lay_U, Lay_Up
    • Lay_D, Lay_Down
    • Lay_L, Lay_Left
    • Lay_R, Lay_Right

次の未完成の機能は短期的にはサポートされていません。

  • [ ] スプライト

  • [ ] タグ

  • [ ] リンク

  • [ ] レジェンド

  • [x] システムコンテキスト

    • [x] Person(alias, label, ?descr, ?sprite, ?tags, $link)
    • [x] Person_Ext
    • [x] System(alias, label, ?descr, ?sprite, ?tags, $link)
    • [x] SystemDb
    • [x] SystemQueue
    • [x] System_Ext
    • [x] SystemDb_Ext
    • [x] SystemQueue_Ext
    • [x] Boundary(alias, label, ?type, ?tags, $link)
    • [x] Enterprise_Boundary(alias, label, ?tags, $link)
    • [x] System_Boundary

  • [x] コンテナダイアグラム

    • [x] Container(alias, label, ?techn, ?descr, ?sprite, ?tags, $link)
    • [x] ContainerDb
    • [x] ContainerQueue
    • [x] Container_Ext
    • [x] ContainerDb_Ext
    • [x] ContainerQueue_Ext
    • [x] Container_Boundary(alias, label, ?tags, $link)

  • [x] コンポーネントダイアグラム

    • [x] Component(alias, label, ?techn, ?descr, ?sprite, ?tags, $link)
    • [x] ComponentDb
    • [x] ComponentQueue
    • [x] Component_Ext
    • [x] ComponentDb_Ext
    • [x] ComponentQueue_Ext

  • [x] ダイナミックダイアグラム

    • [x] RelIndex(index, from, to, label, ?tags, $link)

  • [x] デプロイメントダイアグラム

    • [x] Deployment_Node(alias, label, ?type, ?descr, ?sprite, ?tags, $link)
    • [x] Node(alias, label, ?type, ?descr, ?sprite, ?tags, $link): Deployment_Node() の短い名前
    • [x] Node_L(alias, label, ?type, ?descr, ?sprite, ?tags, $link): 左寄せノード()
    • [x] Node_R(alias, label, ?type, ?descr, ?sprite, ?tags, $link): 右寄せノード()

  • [x] リレーションシップタイプ

    • [x] Rel(from, to, label, ?techn, ?descr, ?sprite, ?tags, $link)
    • [x] BiRel (双方向リレーションシップ)
    • [x] Rel_U, Rel_Up
    • [x] Rel_D, Rel_Down
    • [x] Rel_L, Rel_Left
    • [x] Rel_R, Rel_Right
    • [x] Rel_Back
    • [x] RelIndex * C4-PlantUML構文と互換性がありますが、インデックスパラメータは無視されます。シーケンス番号は、rel ステートメントが書かれる順序によって決まります。

  • [ ] カスタムタグ/ステレオタイプのサポートとスキンパラメータの更新

    • [ ] AddElementTag(tagStereo, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?sprite, ?techn, ?legendText, ?legendSprite): 新しい要素タグを導入します。タグ付けされた要素のスタイルが更新され、タグが計算されたレジェンドに表示されます。
    • [ ] AddRelTag(tagStereo, ?textColor, ?lineColor, ?lineStyle, ?sprite, ?techn, ?legendText, ?legendSprite): 新しいリレーションシップタグを導入します。タグ付けされたリレーションシップのスタイルが更新され、タグが計算されたレジェンドに表示されます。
    • [x] UpdateElementStyle(elementName, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?sprite, ?techn, ?legendText, ?legendSprite): この呼び出しは要素のデフォルトスタイルを更新し、追加のレジェンドエントリを作成しません。
    • [x] UpdateRelStyle(from, to, ?textColor, ?lineColor, ?offsetX, ?offsetY): この呼び出しはデフォルトのリレーションシップカラーを更新し、追加のレジェンドエントリを作成しません。テキストの元の位置に対するオフセットを設定するための新しいパラメータ offsetX と offsetY が追加されました。
    • [ ] RoundedBoxShape(): この呼び出しは、丸みを帯びたボックス形状の名前を返し、?shape 引数として使用できます。
    • [ ] EightSidedShape(): この呼び出しは、八角形の名前を返し、?shape 引数として使用できます。
    • [ ] DashedLine(): この呼び出しは、破線の名前を返し、?lineStyle 引数として使用できます。
    • [ ] DottedLine(): この呼び出しは、点線の名前を返し、?lineStyle 引数として使用できます。
    • [ ] BoldLine(): この呼び出しは、太線の名前を返し、?lineStyle 引数として使用できます。
    • [x] UpdateLayoutConfig(?c4ShapeInRow, ?c4BoundaryInRow): 新しい。デフォルトの c4ShapeInRow(4) と c4BoundaryInRow(2) を更新します。

パラメータには 2 つの割り当て方法があります。1 つは、パラメータの順序で非名義パラメータ割り当て方式を使用し、もう 1 つは名前の付いたパラメータ割り当て方式を使用します。この場合、名前は $ シンボルから始める必要があります。

例: UpdateRelStyle(from, to, ?textColor, ?lineColor, ?offsetX, ?offsetY)

UpdateRelStyle(customerA, bankA, "red", "blue", "-40", "60")
UpdateRelStyle(customerA, bankA, $offsetX="-40", $offsetY="60", $lineColor="blue", $textColor="red")
UpdateRelStyle(customerA, bankA, $offsetY="60")

C4 システムコンテキストダイアグラム (C4Context) ​

Code:
mermaid

C4 コンテナダイアグラム (C4Container) ​

Code:
mermaid

C4 コンポーネントダイアグラム (C4Component) ​

Code:
mermaid

C4 ダイナミックダイアグラム (C4Dynamic) ​

Code:
mermaid

C4 デプロイメントダイアグラム (C4Deployment) ​

Code:
mermaid