mermaid/docs/mermaidAPI.md

mermaidAPI

This is the api to be used when optionally handling the integration with the web page, instead of using the default integration provided by mermaid.js.

The core of this api is the render function which, given a graph definition as text, renders the graph/diagram and returns an svg element for the graph.

It is is then up to the user of the API to make use of the svg, either insert it somewhere in the page or do something completely different.

In addition to the render function, a number of behavioral configuration options are available.

Configuration

These are the default options which can be overridden with the initialization call like so: Example 1:

mermaid.initialize({
  flowchart:{
    htmlLabels: false
  }
});

Example 2:

<script>
  var config = {
    startOnLoad:true,
    flowchart:{
      useMaxWidth:true,
      htmlLabels:true,
      curve:'cardinal',
    },

    securityLevel:'loose',
  };
  mermaid.initialize(config);
</script>

A summary of all options and their defaults is found here. A description of each option follows below.

theme

theme , the CSS style sheet

theme - Choose one of the built-in themes:

• default
• forest
• dark
• neutral. To disable any pre-defined mermaid theme, use "null".

themeCSS - Use your own CSS. This overrides theme.

 "theme": "forest",
 "themeCSS": ".node rect { fill: red; }"

fontFamily

fontFamily The font to be used for the rendered diagrams. Default value is \"trebuchet ms\", verdana, arial;

logLevel

This option decides the amount of logging to be used.

• debug: 1
• info: 2
• warn: 3
• error: 4
• fatal: (default) 5

securityLevel

Sets the level of trust to be used on the parsed diagrams.

• strict: (default) tags in text are encoded, click functionality is disabeled
• loose: tags in text are allowed, click functionality is enabled

startOnLoad

This options controls whether or mermaid starts when the page loads Default value true.

arrowMarkerAbsolute

This options controls whether or arrow markers in html code will be absolute paths or an anchor, #. This matters if you are using base tag settings. Default value false.

flowchart

The object containing configurations specific for flowcharts

htmlLabels

Flag for setting whether or not a html tag should be used for rendering labels on the edges. Default value true.

nodeSpacing

Defines the spacing between nodes on the same level (meaning horizontal spacing for TB or BT graphs, and the vertical spacing for LR as well as RL graphs). Default value 50.

rankSpacing

Defines the spacing between nodes on different levels (meaning vertical spacing for TB or BT graphs, and the horizontal spacing for LR as well as RL graphs). Default value 50.

curve

How mermaid renders curves for flowcharts. Possible values are

• basis
• linear default
• cardinal

sequence

The object containing configurations specific for sequence diagrams

diagramMarginX

margin to the right and left of the sequence diagram. Default value 50.

diagramMarginY

margin to the over and under the sequence diagram. Default value 10.

actorMargin

Margin between actors. Default value 50.

width

Width of actor boxes Default value 150.

height

Height of actor boxes Default value 65.

boxMargin

Margin around loop boxes Default value 10.

boxTextMargin

margin around the text in loop/alt/opt boxes Default value 5.

noteMargin

margin around notes. Default value 10.

messageMargin

Space between messages. Default value 35.

messageAlign

Multiline message alignment. Possible values are:

• left
• center default
• right

mirrorActors

mirror actors under diagram. Default value true.

bottomMarginAdj

Depending on css styling this might need adjustment. Prolongs the edge of the diagram downwards. Default value 1.

useMaxWidth

when this flag is set the height and width is set to 100% and is then scaling with the available space if not the absolute space required is used. Default value true.

rightAngles

This will display arrows that start and begin at the same node as right angles, rather than a curve Default value false.

showSequenceNumbers

This will show the node numbers Default value false.

actorFontSize

This sets the font size of the actor's description Default value 14.

actorFontFamily

This sets the font family of the actor's description Default value "Open-Sans", "sans-serif".

actorFontWeight

This sets the font weight of the actor's description **Default value 400.

noteFontSize

This sets the font size of actor-attached notes. Default value 14.

noteFontFamily

This sets the font family of actor-attached notes. Default value "trebuchet ms", verdana, arial.

noteFontWeight

This sets the font weight of the note's description **Default value 400.

noteAlign

This sets the text alignment of actor-attached notes. Default value center.

messageFontSize

This sets the font size of actor messages. Default value 16.

messageFontFamily

This sets the font family of actor messages. Default value "trebuchet ms", verdana, arial.

messageFontWeight

This sets the font weight of the message's description **Default value 400.

wrapEnabled

This sets the auto-wrap state for the diagram **Default value false.

wrapPadding

This sets the auto-wrap padding for the diagram (sides only) **Default value 15.

gantt

The object containing configurations specific for gantt diagrams*

titleTopMargin

Margin top for the text over the gantt diagram Default value 25.

barHeight

The height of the bars in the graph Default value 20.

barGap

The margin between the different activities in the gantt diagram. Default value 4.

topPadding

Margin between title and gantt diagram and between axis and gantt diagram. Default value 50.

leftPadding

The space allocated for the section name to the left of the activities. Default value 75.

gridLineStartPadding

Vertical starting position of the grid lines. Default value 35.

fontSize

Font size ... Default value 11.

fontFamily

font family ... Default value '"Open-Sans", "sans-serif"'.

numberSectionStyles

The number of alternating section styles. Default value 4.

axisFormat

Datetime format of the axis. This might need adjustment to match your locale and preferences Default value '%Y-%m-%d'.

journey

The object containing configurations specific for sequence diagrams

diagramMarginX

margin to the right and left of the sequence diagram. Default value 50.

diagramMarginY

margin to the over and under the sequence diagram. Default value 10.

actorMargin

Margin between actors. Default value 50.

width

Width of actor boxes Default value 150.

height

Height of actor boxes Default value 65.

boxMargin

Margin around loop boxes Default value 10.

boxTextMargin

margin around the text in loop/alt/opt boxes Default value 5.

noteMargin

margin around notes. Default value 10.

messageMargin

Space between messages. Default value 35.

messageAlign

Multiline message alignment. Possible values are:

• left
• center default
• right

bottomMarginAdj

Depending on css styling this might need adjustment. Prolongs the edge of the diagram downwards. Default value 1.

useMaxWidth

when this flag is set the height and width is set to 100% and is then scaling with the available space if not the absolute space required is used. Default value true.

rightAngles

This will display arrows that start and begin at the same node as right angles, rather than a curve Default value false.

er

The object containing configurations specific for entity relationship diagrams

diagramPadding

The amount of padding around the diagram as a whole so that embedded diagrams have margins, expressed in pixels

layoutDirection

Directional bias for layout of entities. Can be either 'TB', 'BT', 'LR', or 'RL', where T = top, B = bottom, L = left, and R = right.

minEntityWidth

The mimimum width of an entity box, expressed in pixels

minEntityHeight

The minimum height of an entity box, expressed in pixels

entityPadding

The minimum internal padding between the text in an entity box and the enclosing box borders, expressed in pixels

stroke

Stroke color of box edges and lines

fill

Fill color of entity boxes

fontSize

Font size (expressed as an integer representing a number of pixels)

render

Function that renders an svg with a graph from a chart definition. Usage example below.

mermaidAPI.initialize({
     startOnLoad:true
 });
 $(function(){
     const graphDefinition = 'graph TB\na-->b';
     const cb = function(svgGraph){
         console.log(svgGraph);
     };
     mermaidAPI.render('id1',graphDefinition,cb);
 });

Parameters

• id the id of the element to be rendered
• _txt
• cb callback which is called after rendering is finished with the svg code as inparam.
• container selector to element in which a div with the graph temporarily will be inserted. In one is provided a hidden div will be inserted in the body of the page instead. The element will be removed when rendering is completed.
• txt the graph definition

mermaidAPI configuration defaults

<script>
  var config = {
    theme:'default',
    logLevel:'fatal',
    securityLevel:'strict',
    startOnLoad:true,
    arrowMarkerAbsolute:false,

    flowchart:{
      htmlLabels:true,
      curve:'linear',
    },
    sequence:{
      diagramMarginX:50,
      diagramMarginY:10,
      actorMargin:50,
      width:150,
      height:65,
      boxMargin:10,
      boxTextMargin:5,
      noteMargin:10,
      messageMargin:35,
      messageAlign:'center',
      mirrorActors:true,
      bottomMarginAdj:1,
      useMaxWidth:true,
      rightAngles:false,
      showSequenceNumbers:false,
    },
    gantt:{
      titleTopMargin:25,
      barHeight:20,
      barGap:4,
      topPadding:50,
      leftPadding:75,
      gridLineStartPadding:35,
      fontSize:11,
      fontFamily:'"Open-Sans", "sans-serif"',
      numberSectionStyles:4,
      axisFormat:'%Y-%m-%d',
    }
  };
  mermaid.initialize(config);
</script>