THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.

Change Log

All changes are in descending order, beginning with the newest (latest) version.

Unreleased

8.7.0 (2020-08-09)

This version brings with it a system for dynamic and integrated configuration of the diagram themes. The objective of this is to increase the customizability of mermaid and the ease of Styling, with the customization of themes through the %%init%% directive and initialize calls.

Themes follow and build upon the Levels of Configuration and employ directives to modify and create custom configurations, as they were introduced in Version 8.6.0.

These Theming Configurations, similar to directives, will also be made applicable in the Live-Editor, for easier styling.

Site-wide Themes

Site-wide themes are still declared via initialize by site owners.

Example of Initalize call setting theme to base:

mermaidAPI.initialize({
  securityLevel: 'loose',
  theme: 'base',
});

Notes: Only site owners can use the mermaidAPI.initialize call, to set values. Site-Users will have to use %%init%% to modify or create the theme for their diagrams.

Themes at the Local or Current Level

When Generating a diagram using on a webpage that supports mermaid. It is also possible to override site-wide theme settings locally, for a specific diagram, using directives, as long as it is not prohibited by the secure array.

Following is an example:

%%{init: {'theme':'base'}}%%
  graph TD
    a --> b

%%{init: {'theme':'base'}}%%
  graph TD
    a --> b

Loading

Making a Custom Theme with `themeVariables`

The easiest way to make a custom theme is to start with the base theme, and just modify theme variables through themeVariables, via %%init%%.

Parameter	Description	Type	Required	Objects contained
themeVariables	Array containing objects, modifiable with the `%%init%%` directive	Array	Required	primaryColor, lineColor, textColor

Here is an example of overriding primaryColor and giving everything a different look, using %%init%%.

%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ff0000'}}}%%
        graph TD
          A[Christmas] -->|Get money| B(Go shopping)
          B --> C{Let me think}
          B --> G[/Another/]
          C ==>|One| D[Laptop]
          C -->|Two| E[iPhone]
          C -->|Three| F[fa:fa-car Car]
          subgraph section
            C
            D
            E
            F
            G
          end

%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ff0000'}}}%%
        graph TD
          A[Christmas] -->|Get money| B(Go shopping)
          B --> C{Let me think}
          B --> G[/Another/]
          C ==>|One| D[Laptop]
          C -->|Two| E[iPhone]
          C -->|Three| F[fa:fa-car Car]
          subgraph section
            C
            D
            E
            F
            G
          end

Loading

Notes: Leaving it empty will set all variable values to default.

8.6.0 (2020-07-13)

🔖 Release Notes

Version 8.6.0 introduces New Configuration Protocols and Directives and a Beta for the New Mermaid Live-Editor

With version 8.6.0 comes the release of directives for mermaid, a new system for modifying configurations, with the aim of establishing centralized, sane defaults and simple implementation.

Directives allow for a diagram specific overriding of config, as it has been discussed in Configurations. This allows site users to input modifications to config alongside diagram definitions, when creating diagrams on a private webpage that supports Mermaid.

8.5.0 (2020-04-11)

🔖 Release Notes

This version introduces New diagrams!

New diagrams in 8.5

With version 8.5 there are some bug fixes and enhancements, plus a new diagram type, entity relationship diagrams.

8.2.0 (2019-07-17)

🏷️ Tag

Version 8.2.0, introduces a security improvement.

A securityLevel configuration has to first be cleared, securityLevel sets the level of trust for the parsed diagrams and limits click functionality. This was introduced in version 8.2 as a security improvement, aimed at preventing malicious use.

securityLevel

Parameter	Description	Type	Required	Values
securitylevel	Level of trust for parsed diagram	String	Required	Strict, Loose, antiscript

Notes:

strict: (default) tags in text are encoded, click functionality is disabled
loose: tags in text are allowed, click functionality is enabled
antiscript: html tags in text are allowed, (only script element is removed), click functionality is enabled

⚠️ Note: This changes the default behaviour of mermaid so that after upgrade to 8.2, if the securityLevel is not configured, tags in flowcharts are encoded as tags and clicking is prohibited.

If you are taking responsibility for the diagram source security you can set the securityLevel to a value of your choosing. By doing this clicks and tags are again allowed.

To change `securityLevel` with `mermaidAPI.initialize`:

mermaidAPI.initialize({
  securityLevel: 'loose',
});

Closed issues:

please add tag for 8.0.0 release #863
classDiagram breaks on any edit #858

Files

CHANGELOG.md

Latest commit

History

CHANGELOG.md

File metadata and controls

THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.

Change Log

Unreleased

8.7.0 (2020-08-09)

Site-wide Themes

Themes at the Local or Current Level

Making a Custom Theme with themeVariables

8.6.0 (2020-07-13)

8.5.0 (2020-04-11)

8.2.0 (2019-07-17)

securityLevel

To change securityLevel with mermaidAPI.initialize:

8.1.0 (2019-06-25)

7.0.5 (2017-09-01)

7.0.3 (2017-06-04)

7.0.2 (2017-06-01)

7.0.0 (2017-01-29)

6.0.0 (2016-05-29)

0.5.8 (2016-01-27)

0.5.7 (2016-01-25)

0.5.6 (2015-11-22)

0.5.5 (2015-10-21)

0.5.4 (2015-10-19)

0.5.3 (2015-10-04)

0.5.2 (2015-10-04)

0.5.1 (2015-06-21)

0.5.0 (2015-06-07)

0.4.0 (2015-03-01)

0.3.5 (2015-02-15)

0.3.4 (2015-02-15)

0.3.3 (2015-01-25)

0.3.2 (2015-01-11)

0.3.1 (2015-01-05)

0.3.0 (2014-12-22)

0.2.16 (2014-12-15)

0.2.15 (2014-12-05)

0.2.14 (2014-12-03)

0.2.13 (2014-12-03)

0.2.10 (2014-12-01)

0.2.9 (2014-12-01)

0.2.8 (2014-12-01)

0.2.7 (2014-12-01)

0.2.6 (2014-11-27)

0.2.5 (2014-11-27)

0.2.4 (2014-11-25)

0.2.3 (2014-11-24)

0.2.2 (2014-11-22)

0.2.1 (2014-11-22)

0.2.0 (2014-11-22)

0.1.1 (2014-11-17)

0.1.0 (2014-11-16)

Making a Custom Theme with `themeVariables`

To change `securityLevel` with `mermaidAPI.initialize`: