mermaid

---

Interface: MermaidConfig

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

Properties

altFontFamily?

optional altFontFamily: string

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

---

architecture?

optional architecture: ArchitectureDiagramConfig

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

---

arrowMarkerAbsolute?

optional arrowMarkerAbsolute: boolean

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

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:255

---

c4?

optional c4: C4DiagramConfig

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

---

class?

optional class: ClassDiagramConfig

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

---

cynefin?

optional cynefin: CynefinDiagramConfig

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

---

darkMode?

optional darkMode: boolean

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

---

deterministicIds?

optional deterministicIds: boolean

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

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:233

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:263

---

elk?

optional elk: object

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

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.

keepEntryNodeOnTop?

optional keepEntryNodeOnTop: boolean

Elk specific option that keeps the entry node of a recursive flow at the top of the layout.

When a flow loops back on itself (a back-edge to an earlier node), ELK's degree-based cycle-breaking has no notion of an "entry point" and may rank the first-declared node in the middle, scrambling the reading order. When enabled, the entry node of each cyclic component is pinned to the first layer so the diagram still reads from its entry. Acyclic flows always have a natural source, so this has no effect on them.

Only applies when the cyclic flow has no node without incoming edges: if the loop is fed from outside (e.g. a start node pointing into it), that component already has a natural source and nothing is pinned. Detection is also scoped per container, so cycles that cross a subgraph boundary are not detected.

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.

nodePlacementAlignment?

optional nodePlacementAlignment: "NONE" | "LEFTUP" | "LEFTDOWN" | "RIGHTUP" | "RIGHTDOWN" | "BALANCED"

Elk specific option affecting Brandes-Koepf node placement alignment. NONE picks the alignment with the smallest height.

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:242

---

eventmodeling?

optional eventmodeling: EventModelingDiagramConfig

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

---

flowchart?

optional flowchart: FlowchartDiagramConfig

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

---

fontFamily?

optional fontFamily: string

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

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:265

---

forceLegacyMathML?

optional forceLegacyMathML: boolean

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

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:237

---

gitGraph?

optional gitGraph: GitGraphDiagramConfig

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

---

handDrawnSeed?

optional handDrawnSeed: number

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

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:166

Flag for setting whether or not a html tag should be used for rendering labels on nodes and edges. Note: Diagram-specific htmlLabels settings (e.g., flowchart.htmlLabels) are deprecated. Use this root-level htmlLabels setting instead. The root-level htmlLabels takes precedence over any diagram-specific settings.

---

ishikawa?

optional ishikawa: IshikawaDiagramConfig

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

---

journey?

optional journey: JourneyDiagramConfig

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

---

kanban?

optional kanban: KanbanDiagramConfig

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

---

layout?

optional layout: string

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

Defines which layout algorithm to use for rendering the diagram.

---

legacyMathML?

optional legacyMathML: boolean

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

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:179

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

---

look?

optional look: "neo" | "classic" | "handDrawn"

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

Defines which main look to use for the diagram.

---

markdownAutoWrap?

optional markdownAutoWrap: boolean

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

---

maxEdges?

optional maxEdges: number

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

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:105

The maximum allowed size of the users text diagram

---

mindmap?

optional mindmap: MindmapDiagramConfig

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

---

packet?

optional packet: PacketDiagramConfig

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

---

pie?

optional pie: PieDiagramConfig

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

---

quadrantChart?

optional quadrantChart: QuadrantChartConfig

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

---

radar?

optional radar: RadarDiagramConfig

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

---

railroad?

optional railroad: RailroadDiagramConfig

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

---

requirement?

optional requirement: RequirementDiagramConfig

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

---

sankey?

optional sankey: SankeyDiagramConfig

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

---

secure?

optional secure: string[]

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

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:183

Level of trust for parsed diagram

---

sequence?

optional sequence: SequenceDiagramConfig

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

---

startOnLoad?

optional startOnLoad: boolean

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

Dictates whether mermaid starts on Page load

---

state?

optional state: StateDiagramConfig

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

---

suppressErrorRendering?

optional suppressErrorRendering: boolean

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

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

---

swimlane?

optional swimlane: SwimlaneDiagramConfig

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

---

theme?

optional theme: "default" | "base" | "dark" | "forest" | "neutral" | "neo" | "neo-dark" | "redux" | "redux-dark" | "redux-color" | "redux-dark-color" | "null"

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

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:86

---

themeVariables?

optional themeVariables: any

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

---

timeline?

optional timeline: TimelineDiagramConfig

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

---

treeView?

optional treeView: TreeViewDiagramConfig

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

---

venn?

optional venn: VennDiagramConfig

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

---

wardley-beta?

optional wardley-beta: WardleyDiagramConfig

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

---

wrap?

optional wrap: boolean

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

---

xyChart?

optional xyChart: XYChartConfig

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