crossnote
    Preparing search index...

    Interface MermaidConfig

    interface MermaidConfig {
        agentflow?: AgentflowDiagramConfig;
        altFontFamily?: string;
        architecture?: ArchitectureDiagramConfig;
        arrowMarkerAbsolute?: boolean;
        block?: BlockDiagramConfig;
        c4?: C4DiagramConfig;
        class?: ClassDiagramConfig;
        cynefin?: CynefinDiagramConfig;
        darkMode?: boolean;
        deterministicIds?: boolean;
        deterministicIDSeed?: string;
        dompurifyConfig?: Config;
        elk?: {
            considerModelOrder?:
                | "NONE"
                | "NODES_AND_EDGES"
                | "PREFER_EDGES"
                | "PREFER_NODES";
            cycleBreakingStrategy?: | "INTERACTIVE"
            | "GREEDY"
            | "DEPTH_FIRST"
            | "MODEL_ORDER"
            | "GREEDY_MODEL_ORDER";
            forceNodeModelOrder?: boolean;
            keepEntryNodeOnTop?: boolean;
            layeringLayerBound?: number;
            layeringStrategy?: | "NETWORK_SIMPLEX"
            | "LONGEST_PATH"
            | "LONGEST_PATH_SOURCE"
            | "COFFMAN_GRAHAM"
            | "MIN_WIDTH"
            | "STRETCH_WIDTH"
            | "INTERACTIVE";
            lineHops?: boolean
            | "arc"
            | "gap";
            mergeEdges?: boolean;
            nodePlacementAlignment?:
                | "NONE"
                | "LEFTUP"
                | "LEFTDOWN"
                | "RIGHTUP"
                | "RIGHTDOWN"
                | "BALANCED";
            nodePlacementStrategy?: | "SIMPLE"
            | "NETWORK_SIMPLEX"
            | "LINEAR_SEGMENTS"
            | "BRANDES_KOEPF";
            preset?: "default"
            | "legacy"
            | "modelOrder"
            | "depthFirst";
            straightenEdges?: boolean;
        };
        er?: ErDiagramConfig;
        eventmodeling?: EventModelingDiagramConfig;
        flowchart?: FlowchartDiagramConfig;
        fontFamily?: string;
        fontSize?: number;
        forceLegacyMathML?: boolean;
        gantt?: GanttDiagramConfig;
        gitGraph?: GitGraphDiagramConfig;
        handDrawnSeed?: number;
        htmlLabels?: boolean;
        ishikawa?: IshikawaDiagramConfig;
        journey?: JourneyDiagramConfig;
        kanban?: KanbanDiagramConfig;
        layout?: string;
        legacyMathML?: boolean;
        logLevel?: | 0
        | 1
        | 2
        | 3
        | 4
        | "error"
        | 5
        | "info"
        | "warn"
        | "debug"
        | "trace"
        | "fatal";
        look?: "neo"
        | "classic"
        | "handDrawn";
        markdownAutoWrap?: boolean;
        maxEdges?: number;
        maxTextSize?: number;
        mindmap?: MindmapDiagramConfig;
        packet?: PacketDiagramConfig;
        pie?: PieDiagramConfig;
        quadrantChart?: QuadrantChartConfig;
        radar?: RadarDiagramConfig;
        railroad?: RailroadDiagramConfig;
        requirement?: RequirementDiagramConfig;
        sankey?: SankeyDiagramConfig;
        secure?: string[];
        securityLevel?: "sandbox" | "strict" | "loose" | "antiscript";
        sequence?: SequenceDiagramConfig;
        startOnLoad?: boolean;
        state?: StateDiagramConfig;
        suppressErrorRendering?: boolean;
        swimlane?: SwimlaneDiagramConfig;
        theme?:
            | "default"
            | "forest"
            | "dark"
            | "neutral"
            | "null"
            | "base"
            | "neo"
            | "neo-dark"
            | "redux"
            | "redux-dark"
            | "redux-color"
            | "redux-dark-color";
        themeCSS?: string;
        themeVariables?: any;
        timeline?: TimelineDiagramConfig;
        treeView?: TreeViewDiagramConfig;
        usecase?: UsecaseDiagramConfig;
        venn?: VennDiagramConfig;
        "wardley-beta"?: WardleyDiagramConfig;
        wrap?: boolean;
        xyChart?: XYChartConfig;
    }
    Index

    Properties

    agentflow?: AgentflowDiagramConfig
    altFontFamily?: string
    architecture?: ArchitectureDiagramConfig
    arrowMarkerAbsolute?: boolean

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

    block?: BlockDiagramConfig
    c4?: C4DiagramConfig
    class?: ClassDiagramConfig
    cynefin?: CynefinDiagramConfig
    darkMode?: boolean
    deterministicIds?: boolean

    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?: string

    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?: Config
    elk?: {
        considerModelOrder?:
            | "NONE"
            | "NODES_AND_EDGES"
            | "PREFER_EDGES"
            | "PREFER_NODES";
        cycleBreakingStrategy?: | "INTERACTIVE"
        | "GREEDY"
        | "DEPTH_FIRST"
        | "MODEL_ORDER"
        | "GREEDY_MODEL_ORDER";
        forceNodeModelOrder?: boolean;
        keepEntryNodeOnTop?: boolean;
        layeringLayerBound?: number;
        layeringStrategy?: | "NETWORK_SIMPLEX"
        | "LONGEST_PATH"
        | "LONGEST_PATH_SOURCE"
        | "COFFMAN_GRAHAM"
        | "MIN_WIDTH"
        | "STRETCH_WIDTH"
        | "INTERACTIVE";
        lineHops?: boolean
        | "arc"
        | "gap";
        mergeEdges?: boolean;
        nodePlacementAlignment?:
            | "NONE"
            | "LEFTUP"
            | "LEFTDOWN"
            | "RIGHTUP"
            | "RIGHTDOWN"
            | "BALANCED";
        nodePlacementStrategy?: | "SIMPLE"
        | "NETWORK_SIMPLEX"
        | "LINEAR_SEGMENTS"
        | "BRANDES_KOEPF";
        preset?: "default"
        | "legacy"
        | "modelOrder"
        | "depthFirst";
        straightenEdges?: boolean;
    }

    Type Declaration

    • OptionalconsiderModelOrder?: "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.

    • OptionalcycleBreakingStrategy?: "INTERACTIVE" | "GREEDY" | "DEPTH_FIRST" | "MODEL_ORDER" | "GREEDY_MODEL_ORDER"

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

    • OptionalforceNodeModelOrder?: 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.

    • OptionalkeepEntryNodeOnTop?: 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.

    • OptionallayeringLayerBound?: number

      Elk specific option capping how many nodes COFFMAN_GRAHAM will put in one layer. Ignored by every other layering strategy. Lower values give a taller, narrower drawing.

    • OptionallayeringStrategy?:
          | "NETWORK_SIMPLEX"
          | "LONGEST_PATH"
          | "LONGEST_PATH_SOURCE"
          | "COFFMAN_GRAHAM"
          | "MIN_WIDTH"
          | "STRETCH_WIDTH"
          | "INTERACTIVE"

      Elk specific option deciding which layer each node is assigned to — the column in a left-to-right diagram, the row in a top-down one. This is the coarsest of the three placement decisions, so changing it moves nodes further than anything else short of altering spacing.

      NETWORK_SIMPLEX aims for the fewest long edges. LONGEST_PATH pushes every node as late as it can go. COFFMAN_GRAHAM bounds how many nodes share a layer, giving a more even, block-like shape on wide graphs. MIN_WIDTH and STRETCH_WIDTH trade edge length for a narrower or wider drawing. INTERACTIVE honours positions already on the nodes.

    • OptionallineHops?: boolean | "arc" | "gap"

      Renders edge crossings as small arcs ("hops") or visible gaps, so that it is clear which line passes over which where two edges meet.

      The edge that gives way loses its corner rounding for the segment carrying the hop, which is the trade for a readable crossing. Curved edges are skipped rather than rewritten, to avoid corrupting their geometry. Set to false to draw plain crossings.

    • OptionalmergeEdges?: 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.

    • OptionalnodePlacementAlignment?: "NONE" | "LEFTUP" | "LEFTDOWN" | "RIGHTUP" | "RIGHTDOWN" | "BALANCED"

      Elk specific option affecting Brandes-Koepf node placement alignment. BALANCED combines the four directional alignments; NONE picks the smallest result. Defaults to BALANCED for the default preset and NONE for named non-default presets.

    • OptionalnodePlacementStrategy?: "SIMPLE" | "NETWORK_SIMPLEX" | "LINEAR_SEGMENTS" | "BRANDES_KOEPF"

      Elk specific option affecting how nodes are placed.

    • Optionalpreset?: "default" | "legacy" | "modelOrder" | "depthFirst"

      Named combination of layering, node placement, placement alignment and cycle breaking options. Explicit options override the preset for that option; the remaining preset values still apply.

      default — network simplex layering, balanced Brandes-Koepf placement at the top level and inside subgraphs, and depth-first cycle breaking. Balanced placement favors centered branches and composite-state entries, sometimes at the cost of a wider or taller drawing. It does not guarantee that every edge attaches to the center of its target.

      legacy — Brandes-Koepf placement with NONE alignment and ELK's own greedy cycle breaking. Reproduces the rendering before presets existed.

      modelOrder — network simplex layering and top-level placement, Brandes-Koepf placement inside subgraphs, NONE alignment, and greedy model-order cycle breaking, which favors declaration order.

      depthFirst — the previous default: network simplex layering and top-level placement, Brandes-Koepf placement inside subgraphs, NONE alignment, and depth-first cycle breaking.

      Setting layeringStrategy, nodePlacementStrategy, nodePlacementAlignment or cycleBreakingStrategy explicitly overrides the preset for that option, including an explicit NONE alignment.

    • OptionalstraightenEdges?: boolean

      Straightens an edge that leaves or enters a node with a tiny step.

      ELK spreads an edge's port evenly along a node's side but routes the edge down a channel whose row rarely lines up with that port exactly, leaving a staircase of a few pixels right at the border. With rounded corners the two micro-bends land on top of each other and read as a kink. Enabling this moves the channel onto the port's row and drops the step, so the edge draws as one straight line and both ports stay exactly where the layout put them.

      Only the step next to a node is touched, and only when the edge continues the same way afterwards, so a real turn is never collapsed. An edge is left alone entirely when moving its run would drag the far port, or would introduce a crossing.

    er?: ErDiagramConfig
    eventmodeling?: EventModelingDiagramConfig
    flowchart?: FlowchartDiagramConfig
    fontFamily?: string

    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?: number
    forceLegacyMathML?: boolean

    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?: GanttDiagramConfig
    gitGraph?: GitGraphDiagramConfig
    handDrawnSeed?: number

    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?: boolean

    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?: IshikawaDiagramConfig
    journey?: JourneyDiagramConfig
    kanban?: KanbanDiagramConfig
    layout?: string

    Defines which layout algorithm to use for rendering the diagram.

    Defaults to elk, which is bundled with mermaid. The tiny build omits ELK to stay small and falls back to dagre.

    legacyMathML?: boolean

    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?:
        | 0
        | 1
        | 2
        | 3
        | 4
        | "error"
        | 5
        | "info"
        | "warn"
        | "debug"
        | "trace"
        | "fatal"

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

    look?: "neo" | "classic" | "handDrawn"

    Defines which main look to use for the diagram.

    markdownAutoWrap?: boolean
    maxEdges?: number

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

    maxTextSize?: number

    The maximum allowed size of the users text diagram

    mindmap?: MindmapDiagramConfig
    packet?: PacketDiagramConfig
    pie?: PieDiagramConfig
    quadrantChart?: QuadrantChartConfig
    radar?: RadarDiagramConfig
    railroad?: RailroadDiagramConfig
    requirement?: RequirementDiagramConfig
    sankey?: SankeyDiagramConfig
    secure?: string[]

    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?: "sandbox" | "strict" | "loose" | "antiscript"

    Level of trust for parsed diagram

    sequence?: SequenceDiagramConfig
    startOnLoad?: boolean

    Dictates whether mermaid starts on Page load

    state?: StateDiagramConfig
    suppressErrorRendering?: boolean

    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?: SwimlaneDiagramConfig
    theme?:
        | "default"
        | "forest"
        | "dark"
        | "neutral"
        | "null"
        | "base"
        | "neo"
        | "neo-dark"
        | "redux"
        | "redux-dark"
        | "redux-color"
        | "redux-dark-color"

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

    themeCSS?: string
    themeVariables?: any
    timeline?: TimelineDiagramConfig
    treeView?: TreeViewDiagramConfig
    usecase?: UsecaseDiagramConfig
    venn?: VennDiagramConfig
    "wardley-beta"?: WardleyDiagramConfig
    wrap?: boolean
    xyChart?: XYChartConfig