> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/mermaid-js/mermaid/llms.txt
> Use this file to discover all available pages before exploring further.

# MermaidConfig

> Configuration interface for Mermaid diagrams

The `MermaidConfig` interface defines all configuration options available for Mermaid diagrams. This includes global settings, theme configuration, security options, and diagram-specific configurations.

## Properties

<ResponseField name="theme" type="'default' | 'base' | 'dark' | 'forest' | 'neutral' | 'null'">
  The CSS style sheet theme for the diagram. You may also use `themeCSS` to override this value.
</ResponseField>

<ResponseField name="themeVariables" type="any">
  Variables to customize the selected theme.
</ResponseField>

<ResponseField name="themeCSS" type="string">
  Custom CSS to override theme styles.
</ResponseField>

<ResponseField name="look" type="'classic' | 'handDrawn'">
  Defines which main look to use for the diagram.
</ResponseField>

<ResponseField name="handDrawnSeed" type="number" default={0}>
  Seed for the handDrawn look. Important for automated tests as they will always find differences without the seed. Default value of 0 gives a random seed.
</ResponseField>

<ResponseField name="layout" type="string">
  Defines which layout algorithm to use for rendering the diagram.
</ResponseField>

<ResponseField name="maxTextSize" type="number">
  The maximum allowed size of the user's text diagram.
</ResponseField>

<ResponseField name="maxEdges" type="number">
  Defines the maximum number of edges that can be drawn in a graph.
</ResponseField>

<ResponseField name="elk" type="object">
  Configuration options for the ELK layout algorithm.

  <Expandable title="ELK properties">
    <ResponseField name="mergeEdges" type="boolean">
      Allows edges to share path where convenient. Can make for pretty diagrams but can also make it harder to read.
    </ResponseField>

    <ResponseField name="nodePlacementStrategy" type="'SIMPLE' | 'NETWORK_SIMPLEX' | 'LINEAR_SEGMENTS' | 'BRANDES_KOEPF'">
      Affects how nodes are placed.
    </ResponseField>

    <ResponseField name="cycleBreakingStrategy" type="'GREEDY' | 'DEPTH_FIRST' | 'INTERACTIVE' | 'MODEL_ORDER' | 'GREEDY_MODEL_ORDER'">
      Strategy to find cycles in the graph and decide which edges need adjustment to break loops.
    </ResponseField>

    <ResponseField name="forceNodeModelOrder" type="boolean">
      The node order given by the model does not change to produce a better layout.
    </ResponseField>

    <ResponseField name="considerModelOrder" type="'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.
    </ResponseField>
  </Expandable>
</ResponseField>

<ResponseField name="darkMode" type="boolean">
  Enable dark mode styling.
</ResponseField>

<ResponseField name="htmlLabels" type="boolean">
  Whether to use HTML tags for rendering labels on nodes and edges. Diagram-specific `htmlLabels` settings are deprecated; use this root-level setting instead.
</ResponseField>

<ResponseField name="fontFamily" type="string">
  Specifies the font to be used in the rendered diagrams. Can be any possible CSS `font-family`.
</ResponseField>

<ResponseField name="altFontFamily" type="string">
  Alternative font family.
</ResponseField>

<ResponseField name="logLevel" type="'trace' | 0 | 'debug' | 1 | 'info' | 2 | 'warn' | 3 | 'error' | 4 | 'fatal' | 5">
  The amount of logging to be used by Mermaid.
</ResponseField>

<ResponseField name="securityLevel" type="'strict' | 'loose' | 'antiscript' | 'sandbox'">
  Level of trust for parsed diagram.

  * `strict`: Only safe elements and attributes are allowed
  * `loose`: All elements and attributes are allowed
  * `antiscript`: Scripts are not allowed
  * `sandbox`: Sandboxed rendering
</ResponseField>

<ResponseField name="startOnLoad" type="boolean">
  Dictates whether Mermaid starts on page load.
</ResponseField>

<ResponseField name="arrowMarkerAbsolute" type="boolean">
  Controls whether arrow markers in HTML code are absolute paths or anchors. This matters if you are using base tag settings.
</ResponseField>

<ResponseField name="secure" type="string[]">
  Specifies 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.
</ResponseField>

<ResponseField name="legacyMathML" type="boolean">
  Specifies if Mermaid can expect the dependent to include KaTeX stylesheets for browsers without their own MathML implementation. If disabled and MathML is not supported, math equations are replaced with a warning. If enabled and MathML is not supported, Mermaid falls back to legacy rendering for KaTeX.
</ResponseField>

<ResponseField name="forceLegacyMathML" type="boolean">
  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`.
</ResponseField>

<ResponseField name="deterministicIds" type="boolean" default={false}>
  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 matters if your files are checked into source control (e.g., git) and should not change unless content is changed.
</ResponseField>

<ResponseField name="deterministicIDSeed" type="string">
  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.
</ResponseField>

<ResponseField name="dompurifyConfig" type="DOMPurifyConfiguration">
  Configuration options to pass to the `dompurify` library.
</ResponseField>

<ResponseField name="wrap" type="boolean">
  Enable text wrapping.
</ResponseField>

<ResponseField name="fontSize" type="number">
  Default font size for diagrams.
</ResponseField>

<ResponseField name="markdownAutoWrap" type="boolean">
  Enable automatic wrapping for markdown content.
</ResponseField>

<ResponseField name="suppressErrorRendering" type="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.
</ResponseField>

## Diagram-specific configurations

<ResponseField name="flowchart" type="FlowchartDiagramConfig">
  Configuration specific to flowchart diagrams.
</ResponseField>

<ResponseField name="sequence" type="SequenceDiagramConfig">
  Configuration specific to sequence diagrams.
</ResponseField>

<ResponseField name="gantt" type="GanttDiagramConfig">
  Configuration specific to Gantt diagrams.
</ResponseField>

<ResponseField name="journey" type="JourneyDiagramConfig">
  Configuration specific to journey diagrams.
</ResponseField>

<ResponseField name="timeline" type="TimelineDiagramConfig">
  Configuration specific to timeline diagrams.
</ResponseField>

<ResponseField name="class" type="ClassDiagramConfig">
  Configuration specific to class diagrams.
</ResponseField>

<ResponseField name="state" type="StateDiagramConfig">
  Configuration specific to state diagrams.
</ResponseField>

<ResponseField name="er" type="ErDiagramConfig">
  Configuration specific to entity relationship diagrams.
</ResponseField>

<ResponseField name="pie" type="PieDiagramConfig">
  Configuration specific to pie diagrams.
</ResponseField>

<ResponseField name="quadrantChart" type="QuadrantChartConfig">
  Configuration specific to quadrant chart diagrams.
</ResponseField>

<ResponseField name="xyChart" type="XYChartConfig">
  Configuration specific to XY chart diagrams.
</ResponseField>

<ResponseField name="requirement" type="RequirementDiagramConfig">
  Configuration specific to requirement diagrams.
</ResponseField>

<ResponseField name="architecture" type="ArchitectureDiagramConfig">
  Configuration specific to architecture diagrams.
</ResponseField>

<ResponseField name="mindmap" type="MindmapDiagramConfig">
  Configuration specific to mindmap diagrams.
</ResponseField>

<ResponseField name="ishikawa" type="IshikawaDiagramConfig">
  Configuration specific to Ishikawa diagrams.
</ResponseField>

<ResponseField name="kanban" type="KanbanDiagramConfig">
  Configuration specific to Kanban diagrams.
</ResponseField>

<ResponseField name="gitGraph" type="GitGraphDiagramConfig">
  Configuration specific to Git graph diagrams.
</ResponseField>

<ResponseField name="c4" type="C4DiagramConfig">
  Configuration specific to C4 diagrams.
</ResponseField>

<ResponseField name="sankey" type="SankeyDiagramConfig">
  Configuration specific to Sankey diagrams.
</ResponseField>

<ResponseField name="packet" type="PacketDiagramConfig">
  Configuration specific to packet diagrams.
</ResponseField>

<ResponseField name="block" type="BlockDiagramConfig">
  Configuration specific to block diagrams.
</ResponseField>

<ResponseField name="radar" type="RadarDiagramConfig">
  Configuration specific to radar diagrams.
</ResponseField>

<ResponseField name="venn" type="VennDiagramConfig">
  Configuration specific to Venn diagrams.
</ResponseField>

## Example usage

```javascript theme={null}
import mermaid from 'mermaid';

mermaid.initialize({
  theme: 'dark',
  logLevel: 'error',
  securityLevel: 'strict',
  startOnLoad: true,
  deterministicIds: true,
  deterministicIDSeed: 'my-seed',
  flowchart: {
    curve: 'basis',
    padding: 20,
    nodeSpacing: 50,
    rankSpacing: 50
  },
  sequence: {
    mirrorActors: true,
    showSequenceNumbers: true
  }
});
```

## TypeScript definition

```typescript theme={null}
export interface MermaidConfig {
  theme?: 'default' | 'base' | 'dark' | 'forest' | 'neutral' | 'null';
  themeVariables?: any;
  themeCSS?: string;
  look?: 'classic' | 'handDrawn';
  handDrawnSeed?: number;
  layout?: string;
  maxTextSize?: number;
  maxEdges?: number;
  elk?: {
    mergeEdges?: boolean;
    nodePlacementStrategy?: 'SIMPLE' | 'NETWORK_SIMPLEX' | 'LINEAR_SEGMENTS' | 'BRANDES_KOEPF';
    cycleBreakingStrategy?: 'GREEDY' | 'DEPTH_FIRST' | 'INTERACTIVE' | 'MODEL_ORDER' | 'GREEDY_MODEL_ORDER';
    forceNodeModelOrder?: boolean;
    considerModelOrder?: 'NONE' | 'NODES_AND_EDGES' | 'PREFER_EDGES' | 'PREFER_NODES';
  };
  darkMode?: boolean;
  htmlLabels?: boolean;
  fontFamily?: string;
  altFontFamily?: string;
  logLevel?: 'trace' | 0 | 'debug' | 1 | 'info' | 2 | 'warn' | 3 | 'error' | 4 | 'fatal' | 5;
  securityLevel?: 'strict' | 'loose' | 'antiscript' | 'sandbox';
  startOnLoad?: boolean;
  arrowMarkerAbsolute?: boolean;
  secure?: string[];
  legacyMathML?: boolean;
  forceLegacyMathML?: boolean;
  deterministicIds?: boolean;
  deterministicIDSeed?: string;
  flowchart?: FlowchartDiagramConfig;
  sequence?: SequenceDiagramConfig;
  gantt?: GanttDiagramConfig;
  // ... other diagram configs
  dompurifyConfig?: DOMPurifyConfiguration;
  wrap?: boolean;
  fontSize?: number;
  markdownAutoWrap?: boolean;
  suppressErrorRendering?: boolean;
}
```