C4図
C4図：これは現在実験的な図です。構文とプロパティは今後のリリースで変更される可能性があります。構文が安定したら適切なドキュメントが提供されます。
MermaidのC4図構文はplantUMLと互換性があります。下記の例を参照してください。
例については、ソースコード demos/index.html を参照してください。
5種類のC4図がサポートされています。
- システムコンテキスト図 (C4Context)
- コンテナ図 (C4Container)
- コンポーネント図 (C4Component)
- 動的図 (C4Dynamic)
- デプロイメント図 (C4Deployment)
C4図の書き方については、リンクされたドキュメント C4-PlantUML構文 を参照してください。
C4図はCSSの色などスタイルが固定されているため、スキンが異なっても異なるCSSは提供されません。 updateElementStyleとUpdateElementStyleは図の最後に記述します。 updateElementStyleは元の定義と矛盾しており、テキストラベルの元の位置に対するオフセットなど、関係のスタイルを更新します。
レイアウトは完全自動レイアウトアルゴリズムを使用しません。図形の配置は、ステートメントが記述される順序を変更することで調整されます。そのため、以下のレイアウトステートメントをサポートする予定はありません。1行あたりの図形の数と境界の数は、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): 左揃えのNode()
- [x] Node_R(alias, label, ?type, ?descr, ?sprite, ?tags, $link): 右揃えのNode()
[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構文と互換性がありますが、indexパラメータは無視されます。連番は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): この呼び出しは、デフォルトの関係色を更新し、追加の凡例エントリを作成しません。テキストの元の位置のオフセットを設定するために、2つの新しいパラメータoffsetXとoffsetYが追加されました。
- [ ] RoundedBoxShape(): この呼び出しは、丸いボックスシェイプの名前を返し、?shape引数として使用できます。
- [ ] EightSidedShape(): この呼び出しは、8面のシェイプの名前を返し、?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")