Mermaid

外観

Mermaid Chartのビジュアルエディターを使って図を設計・構築する

フローチャート図設定スキーマ ​

txt
https://mermaid.dokyumento.jp/schemas/config.schema.json#/$defs/FlowchartDiagramConfig

フローチャート固有の設定を含むオブジェクト

抽象的拡張可能ステータス識別可能カスタムプロパティ追加プロパティアクセス制限定義場所
インスタンス化可能いいえ不明なステータスいいえ禁止許可なしconfig.schema.json*

FlowchartDiagramConfig型 ​

object (フローチャート図設定)

全て

FlowchartDiagramConfigプロパティ ​

プロパティ型必須Null可能定義者
titleTopMargininteger必須nullにすることはできませんMermaid設定
subGraphTitleMarginobject必須nullにすることはできませんMermaid設定
arrowMarkerAbsolutebooleanオプションnullにすることはできませんMermaid設定
diagramPaddinginteger必須nullにすることはできませんMermaid設定
htmlLabelsboolean必須nullにすることはできませんMermaid設定
nodeSpacinginteger必須nullにすることはできませんMermaid設定
rankSpacinginteger必須nullにすることはできませんMermaid設定
curvestring必須nullにすることはできませんMermaid設定
paddingnumberオプションnullにすることはできませんMermaid設定
defaultRendererstring必須nullにすることはできませんMermaid設定
wrappingWidthnumber必須nullにすることはできませんMermaid設定

titleTopMargin ​

図の上に表示されるテキストの上部マージン

titleTopMargin

  • 必須です

  • 型：integer

  • nullにすることはできません

  • 定義場所： Mermaid設定

titleTopMargin型 ​

integer

titleTopMargin制約 ​

最小値: この数値の値は、次の値以上でなければなりません: 0

titleTopMarginデフォルト値 ​

デフォルト値は

json
25

subGraphTitleMargin ​

サブグラフのタイトルに対して上下のマージンを定義します。

subGraphTitleMargin

  • 必須です

  • 型：object (詳細)

  • nullにすることはできません

  • 定義場所： Mermaid設定

subGraphTitleMargin型 ​

object (詳細)

subGraphTitleMarginデフォルト値 ​

デフォルト値は

json
{
  "top": 0,
  "bottom": 0
}

arrowMarkerAbsolute ​

arrowMarkerAbsolute

  • オプションです

  • 型：boolean

  • nullにすることはできません

  • 定義場所： Mermaid設定

arrowMarkerAbsolute型 ​

boolean

diagramPadding ​

埋め込み図にマージンを持たせるために、図全体に適用するパディングの量（ピクセル単位）

diagramPadding

  • 必須です

  • 型：integer

  • nullにすることはできません

  • 定義場所： Mermaid設定

diagramPadding型 ​

integer

diagramPadding制約 ​

最小値: この数値の値は、次の値以上でなければなりません: 0

diagramPaddingデフォルト値 ​

デフォルト値は

json
20

htmlLabels ​

エッジ上のラベルのレンダリングにHTMLタグを使用するかどうかを設定するフラグ。

htmlLabels

  • 必須です

  • 型：boolean

  • nullにすることはできません

  • 定義場所： Mermaid設定

htmlLabels型 ​

boolean

htmlLabelsデフォルト値 ​

デフォルト値は

json
true

nodeSpacing ​

同じレベルにあるノード間の間隔を定義します

TB（上から下）またはBT（下から上）のグラフでは水平間隔、LRおよびRLグラフでは垂直間隔に関係します。

nodeSpacing

  • 必須です

  • 型：integer

  • nullにすることはできません

  • 定義場所： Mermaid設定

nodeSpacing型 ​

integer

nodeSpacing制約 ​

最小値: この数値の値は、次の値以上でなければなりません: 0

nodeSpacingデフォルト値 ​

デフォルト値は

json
50

rankSpacing ​

異なるレベルにあるノード間の間隔を定義します

TB（上から下）またはBT（下から上）のグラフでは水平間隔、LRおよびRLグラフでは垂直間隔に関係します。

rankSpacing

  • 必須です

  • 型：integer

  • nullにすることはできません

  • 定義場所： Mermaid設定

rankSpacing型 ​

integer

rankSpacing制約 ​

最小値: この数値の値は、次の値以上でなければなりません: 0

rankSpacingデフォルト値 ​

デフォルト値は

json
50

curve ​

Mermaidがフローチャートの曲線をどのようにレンダリングするかを定義します。

curve

  • 必須です

  • 型：string

  • nullにすることはできません

  • 定義場所： Mermaid設定

curve型 ​

string

curve制約 ​

enum: このプロパティの値は、次のいずれかの値と等しくなければなりません

値説明
"basis"
"linear"
"cardinal"

curveデフォルト値 ​

デフォルト値は

json
"basis"

padding ​

ラベルと図形の間のパディングを表します

新しい実験的レンダリングでのみ使用されます。

padding

  • オプションです

  • 型：number

  • nullにすることはできません

  • 定義場所： Mermaid設定

padding型 ​

number

paddingデフォルト値 ​

デフォルト値は

json
15

defaultRenderer ​

レンダリングに使用するレンダリングエンジンを決定します。

defaultRenderer

  • 必須です

  • 型：string

  • nullにすることはできません

  • 定義場所： Mermaid設定

defaultRenderer型 ​

string

defaultRenderer制約 ​

enum: このプロパティの値は、次のいずれかの値と等しくなければなりません

値説明
"dagre-d3"[dagre-d3-es](https://www.npmjs.com/package/dagre-d3-es)ライブラリ。
"dagre-wrapper"mermaidに実装されたdagreのラッパー
"elk"[elkjs](https://github.com/kieler/elkjs)を使用したレイアウト

defaultRendererデフォルト値 ​

デフォルト値は

json
"dagre-wrapper"

wrappingWidth ​

テキストが折り返されるノードの幅。

マークダウン文字列を使用する場合、テキストは自動的に折り返されます。この値は、テキストが新しい行に続くまでの最大幅を設定します。

wrappingWidth

  • 必須です

  • 型：number

  • nullにすることはできません

  • 定義場所： Mermaid設定

wrappingWidth型 ​

number

wrappingWidthデフォルト値 ​

デフォルト値は

json
200