mermaid

---

Interface: MermaidConfig

Defined in: packages/mermaid/src/config.type.ts:58

Properties

altFontFamily?

optional altFontFamily: string

Defined in: packages/mermaid/src/config.type.ts:132

---

architecture?

optional architecture: ArchitectureDiagramConfig

Defined in: packages/mermaid/src/config.type.ts:204

---

arrowMarkerAbsolute?

optional arrowMarkerAbsolute: boolean

Defined in: packages/mermaid/src/config.type.ts:151

Controls whether or arrow markers in html code are absolute paths or anchors. This matters if you are using base tag settings.

---

block?

optional block: BlockDiagramConfig

Defined in: packages/mermaid/src/config.type.ts:211

---

c4?

optional c4: C4DiagramConfig

Defined in: packages/mermaid/src/config.type.ts:208

---

class?

optional class: ClassDiagramConfig

Defined in: packages/mermaid/src/config.type.ts:197

---

darkMode?

optional darkMode: boolean

Defined in: packages/mermaid/src/config.type.ts:123

---

deterministicIds?

optional deterministicIds: boolean

Defined in: packages/mermaid/src/config.type.ts:184

This option controls if the generated ids of nodes in the SVG are generated randomly or based on a seed. If set to false, the IDs are generated based on the current date and thus are not deterministic. This is the default behavior.

This matters if your files are checked into source control e.g. git and should not change unless content is changed.

---

deterministicIDSeed?

optional deterministicIDSeed: string

Defined in: packages/mermaid/src/config.type.ts:191

This option is the optional seed for deterministic ids. If set to undefined but deterministicIds is true, a simple number iterator is used. You can set this attribute to base the seed on a static string.

---

dompurifyConfig?

optional dompurifyConfig: Config

Defined in: packages/mermaid/src/config.type.ts:213

---

elk?

optional elk: object

Defined in: packages/mermaid/src/config.type.ts:91

considerModelOrder?

optional considerModelOrder: "NONE" | "NODES_AND_EDGES" | "PREFER_EDGES" | "PREFER_NODES"

Preserves the order of nodes and edges in the model file if this does not lead to additional edge crossings. Depending on the strategy this is not always possible since the node and edge order might be conflicting.

cycleBreakingStrategy?

optional cycleBreakingStrategy: "GREEDY" | "DEPTH_FIRST" | "INTERACTIVE" | "MODEL_ORDER" | "GREEDY_MODEL_ORDER"

This strategy decides how to find cycles in the graph and deciding which edges need adjustment to break loops.

forceNodeModelOrder?

optional forceNodeModelOrder: boolean

The node order given by the model does not change to produce a better layout. E.g. if node A is before node B in the model this is not changed during crossing minimization. This assumes that the node model order is already respected before crossing minimization. This can be achieved by setting considerModelOrder.strategy to NODES_AND_EDGES.

mergeEdges?

optional mergeEdges: boolean

Elk specific option that allows edges to share path where it convenient. It can make for pretty diagrams but can also make it harder to read the diagram.

nodePlacementStrategy?

optional nodePlacementStrategy: "SIMPLE" | "NETWORK_SIMPLEX" | "LINEAR_SEGMENTS" | "BRANDES_KOEPF"

Elk specific option affecting how nodes are placed.

---

er?

optional er: ErDiagramConfig

Defined in: packages/mermaid/src/config.type.ts:199

---

flowchart?

optional flowchart: FlowchartDiagramConfig

Defined in: packages/mermaid/src/config.type.ts:192

---

fontFamily?

optional fontFamily: string

Defined in: packages/mermaid/src/config.type.ts:131

Specifies the font to be used in the rendered diagrams. Can be any possible CSS font-family. See https://developer.mozilla.org/en-US/docs/Web/CSS/font-family

---

fontSize?

optional fontSize: number

Defined in: packages/mermaid/src/config.type.ts:215

---

forceLegacyMathML?

optional forceLegacyMathML: boolean

Defined in: packages/mermaid/src/config.type.ts:173

This option forces Mermaid to rely on KaTeX's own stylesheet for rendering MathML. Due to differences between OS fonts and browser's MathML implementation, this option is recommended if consistent rendering is important. If set to true, ignores legacyMathML.

---

gantt?

optional gantt: GanttDiagramConfig

Defined in: packages/mermaid/src/config.type.ts:194

---

gitGraph?

optional gitGraph: GitGraphDiagramConfig

Defined in: packages/mermaid/src/config.type.ts:207

---

handDrawnSeed?

optional handDrawnSeed: number

Defined in: packages/mermaid/src/config.type.ts:76

Defines the seed to be used when using handDrawn look. This is important for the automated tests as they will always find differences without the seed. The default value is 0 which gives a random seed.

---

htmlLabels?

optional htmlLabels: boolean

Defined in: packages/mermaid/src/config.type.ts:124

---

journey?

optional journey: JourneyDiagramConfig

Defined in: packages/mermaid/src/config.type.ts:195

---

kanban?

optional kanban: KanbanDiagramConfig

Defined in: packages/mermaid/src/config.type.ts:206

---

layout?

optional layout: string

Defined in: packages/mermaid/src/config.type.ts:81

Defines which layout algorithm to use for rendering the diagram.

---

legacyMathML?

optional legacyMathML: boolean

Defined in: packages/mermaid/src/config.type.ts:166

This option specifies if Mermaid can expect the dependent to include KaTeX stylesheets for browsers without their own MathML implementation. If this option is disabled and MathML is not supported, the math equations are replaced with a warning. If this option is enabled and MathML is not supported, Mermaid will fall back to legacy rendering for KaTeX.

---

logLevel?

optional logLevel: 0 | 2 | 1 | "trace" | "debug" | "info" | "warn" | "error" | "fatal" | 3 | 4 | 5

Defined in: packages/mermaid/src/config.type.ts:137

This option decides the amount of logging to be used by mermaid.

---

look?

optional look: "classic" | "handDrawn"

Defined in: packages/mermaid/src/config.type.ts:71

Defines which main look to use for the diagram.

---

markdownAutoWrap?

optional markdownAutoWrap: boolean

Defined in: packages/mermaid/src/config.type.ts:216

---

maxEdges?

optional maxEdges: number

Defined in: packages/mermaid/src/config.type.ts:90

Defines the maximum number of edges that can be drawn in a graph.

---

maxTextSize?

optional maxTextSize: number

Defined in: packages/mermaid/src/config.type.ts:85

The maximum allowed size of the users text diagram

---

mindmap?

optional mindmap: MindmapDiagramConfig

Defined in: packages/mermaid/src/config.type.ts:205

---

packet?

optional packet: PacketDiagramConfig

Defined in: packages/mermaid/src/config.type.ts:210

---

pie?

optional pie: PieDiagramConfig

Defined in: packages/mermaid/src/config.type.ts:200

---

quadrantChart?

optional quadrantChart: QuadrantChartConfig

Defined in: packages/mermaid/src/config.type.ts:201

---

radar?

optional radar: RadarDiagramConfig

Defined in: packages/mermaid/src/config.type.ts:212

---

requirement?

optional requirement: RequirementDiagramConfig

Defined in: packages/mermaid/src/config.type.ts:203

---

sankey?

optional sankey: SankeyDiagramConfig

Defined in: packages/mermaid/src/config.type.ts:209

---

secure?

optional secure: string[]

Defined in: packages/mermaid/src/config.type.ts:158

This option controls which currentConfig keys are considered secure and can only be changed via call to mermaid.initialize. This prevents malicious graph directives from overriding a site's default security.

---

securityLevel?

optional securityLevel: "strict" | "loose" | "antiscript" | "sandbox"

Defined in: packages/mermaid/src/config.type.ts:141

Level of trust for parsed diagram

---

sequence?

optional sequence: SequenceDiagramConfig

Defined in: packages/mermaid/src/config.type.ts:193

---

startOnLoad?

optional startOnLoad: boolean

Defined in: packages/mermaid/src/config.type.ts:145

Dictates whether mermaid starts on Page load

---

state?

optional state: StateDiagramConfig

Defined in: packages/mermaid/src/config.type.ts:198

---

suppressErrorRendering?

optional suppressErrorRendering: boolean

Defined in: packages/mermaid/src/config.type.ts:222

Suppresses inserting 'Syntax error' diagram in the DOM. This is useful when you want to control how to handle syntax errors in your application.

---

theme?

optional theme: "default" | "base" | "dark" | "forest" | "neutral" | "null"

Defined in: packages/mermaid/src/config.type.ts:64

Theme, the CSS style sheet. You may also use themeCSS to override this value.

---

themeCSS?

optional themeCSS: string

Defined in: packages/mermaid/src/config.type.ts:66

---

themeVariables?

optional themeVariables: any

Defined in: packages/mermaid/src/config.type.ts:65

---

timeline?

optional timeline: TimelineDiagramConfig

Defined in: packages/mermaid/src/config.type.ts:196

---

wrap?

optional wrap: boolean

Defined in: packages/mermaid/src/config.type.ts:214

---

xyChart?

optional xyChart: XYChartConfig

Defined in: packages/mermaid/src/config.type.ts:202