| 6dd74de | | | 1 | > **Warning** |
| 6dd74de | | | 2 | > |
| 6dd74de | | | 3 | > ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. |
| 6dd74de | | | 4 | > |
| 6dd74de | | | 5 | > ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/usage.md](../../packages/mermaid/src/docs/config/usage.md). |
| 6dd74de | | | 6 | |
| 6dd74de | | | 7 | # Usage |
| 6dd74de | | | 8 | |
| 6dd74de | | | 9 | Mermaid is a JavaScript tool that makes use of a Markdown based syntax to render customizable diagrams, charts and visualizations. |
| 6dd74de | | | 10 | |
| 6dd74de | | | 11 | Diagrams can be re-rendered/modified by modifying their descriptions. |
| 6dd74de | | | 12 | |
| 6dd74de | | | 13 | ### CDN |
| 6dd74de | | | 14 | |
| 6dd74de | | | 15 | <https://www.jsdelivr.com/package/npm/mermaid> |
| 6dd74de | | | 16 | |
| 6dd74de | | | 17 | Please note that you can switch versions through the dropdown box at the top right. |
| 6dd74de | | | 18 | |
| 6dd74de | | | 19 | ## Using mermaid |
| 6dd74de | | | 20 | |
| 6dd74de | | | 21 | For the majority of users, Using the [Live Editor](https://mermaid.live/) would be sufficient, however you may also opt to deploy mermaid as a dependency or using the [Mermaid API](./setup/README.md). |
| 6dd74de | | | 22 | |
| 6dd74de | | | 23 | We have compiled some Video [Tutorials](../ecosystem/tutorials.md) on how to use the Mermaid Live Editor. |
| 6dd74de | | | 24 | |
| 6dd74de | | | 25 | ### Installing and Hosting Mermaid on a Webpage |
| 6dd74de | | | 26 | |
| 6dd74de | | | 27 | **Using the npm package:** |
| 6dd74de | | | 28 | |
| 6dd74de | | | 29 | Requirements: |
| 6dd74de | | | 30 | |
| 6dd74de | | | 31 | - Node >= 16 |
| 6dd74de | | | 32 | |
| 6dd74de | | | 33 | ```bash |
| 6dd74de | | | 34 | # NPM |
| 6dd74de | | | 35 | npm install mermaid |
| 6dd74de | | | 36 | # Yarn |
| 6dd74de | | | 37 | yarn add mermaid |
| 6dd74de | | | 38 | # PNPM |
| 6dd74de | | | 39 | pnpm add mermaid |
| 6dd74de | | | 40 | ``` |
| 6dd74de | | | 41 | |
| 6dd74de | | | 42 | **Hosting mermaid on a web page:** |
| 6dd74de | | | 43 | |
| 6dd74de | | | 44 | > Note: This topic is explored in greater depth in the [User Guide for Beginners](../intro/getting-started.md) |
| 6dd74de | | | 45 | |
| 6dd74de | | | 46 | The easiest way to integrate mermaid on a web page requires two elements: |
| 6dd74de | | | 47 | |
| 6dd74de | | | 48 | - A graph definition, inside `<pre>` tags labeled `class=mermaid`. |
| 6dd74de | | | 49 | |
| 6dd74de | | | 50 | Example: |
| 6dd74de | | | 51 | |
| 6dd74de | | | 52 | ```html |
| 6dd74de | | | 53 | <pre class="mermaid"> |
| 6dd74de | | | 54 | graph LR |
| 6dd74de | | | 55 | A --- B |
| 6dd74de | | | 56 | B-->C[fa:fa-ban forbidden] |
| 6dd74de | | | 57 | B-->D(fa:fa-spinner); |
| 6dd74de | | | 58 | </pre> |
| 6dd74de | | | 59 | ``` |
| 6dd74de | | | 60 | |
| 6dd74de | | | 61 | - The mermaid js script. Added using a `script` tag as an ESM import. |
| 6dd74de | | | 62 | |
| 6dd74de | | | 63 | Example: |
| 6dd74de | | | 64 | |
| 6dd74de | | | 65 | ```html |
| 6dd74de | | | 66 | <script type="module"> |
| 6dd74de | | | 67 | import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs'; |
| 6dd74de | | | 68 | </script> |
| 6dd74de | | | 69 | ``` |
| 6dd74de | | | 70 | |
| 6dd74de | | | 71 | **Following these directions, mermaid starts at page load and (when the page has loaded) it will locate the graph definitions inside the `pre` tags with `class="mermaid"` and return diagrams in SVG form, following given definitions.** |
| 6dd74de | | | 72 | |
| 6dd74de | | | 73 | ## Simple full example: |
| 6dd74de | | | 74 | |
| 6dd74de | | | 75 | ```html |
| 6dd74de | | | 76 | <!doctype html> |
| 6dd74de | | | 77 | <html lang="en"> |
| 6dd74de | | | 78 | <body> |
| 6dd74de | | | 79 | <pre class="mermaid"> |
| 6dd74de | | | 80 | graph LR |
| 6dd74de | | | 81 | A --- B |
| 6dd74de | | | 82 | B-->C[fa:fa-ban forbidden] |
| 6dd74de | | | 83 | B-->D(fa:fa-spinner); |
| 6dd74de | | | 84 | </pre> |
| 6dd74de | | | 85 | <script type="module"> |
| 6dd74de | | | 86 | import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs'; |
| 6dd74de | | | 87 | </script> |
| 6dd74de | | | 88 | </body> |
| 6dd74de | | | 89 | </html> |
| 6dd74de | | | 90 | ``` |
| 6dd74de | | | 91 | |
| 6dd74de | | | 92 | ## Notes: |
| 6dd74de | | | 93 | |
| 6dd74de | | | 94 | An id attribute is also added to mermaid tags without one. |
| 6dd74de | | | 95 | |
| 6dd74de | | | 96 | Mermaid can load multiple diagrams, in the same page. |
| 6dd74de | | | 97 | |
| 6dd74de | | | 98 | > Try it out, save this code as HTML and load it using any browser. |
| 6dd74de | | | 99 | > (Except Internet Explorer, please don't use Internet Explorer.) |
| 6dd74de | | | 100 | |
| 6dd74de | | | 101 | ## Tiny Mermaid |
| 6dd74de | | | 102 | |
| 6dd74de | | | 103 | We offer a smaller version of Mermaid that's approximately half the size of the full library. This tiny version doesn't support Mindmap Diagrams, Architecture Diagrams, KaTeX rendering, or lazy loading. |
| 6dd74de | | | 104 | |
| 6dd74de | | | 105 | If you need a more lightweight version without these features, you can use [Mermaid Tiny](https://github.com/mermaid-js/mermaid/tree/develop/packages/tiny). |
| 6dd74de | | | 106 | |
| 6dd74de | | | 107 | ## Enabling Click Event and Tags in Nodes |
| 6dd74de | | | 108 | |
| 6dd74de | | | 109 | 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. |
| 6dd74de | | | 110 | |
| 6dd74de | | | 111 | **It is the site owner's responsibility to discriminate between trustworthy and untrustworthy user-bases and we encourage the use of discretion.** |
| 6dd74de | | | 112 | |
| 6dd74de | | | 113 | ## securityLevel |
| 6dd74de | | | 114 | |
| 6dd74de | | | 115 | | Parameter | Description | Type | Required | Values | |
| 6dd74de | | | 116 | | ------------- | --------------------------------- | ------ | -------- | ------------------------------------------ | |
| 6dd74de | | | 117 | | securityLevel | Level of trust for parsed diagram | String | Optional | 'sandbox', 'strict', 'loose', 'antiscript' | |
| 6dd74de | | | 118 | |
| 6dd74de | | | 119 | Values: |
| 6dd74de | | | 120 | |
| 6dd74de | | | 121 | - **strict**: (**default**) HTML tags in the text are encoded and click functionality is disabled. |
| 6dd74de | | | 122 | - **antiscript**: HTML tags in text are allowed (only script elements are removed) and click functionality is enabled. |
| 6dd74de | | | 123 | - **loose**: HTML tags in text are allowed and click functionality is enabled. |
| 6dd74de | | | 124 | - **sandbox**: With this security level, all rendering takes place in a sandboxed iframe. This prevents any JavaScript from running in the context. This may hinder interactive functionality of the diagram, like scripts, popups in the sequence diagram, links to other tabs or targets, etc. |
| 6dd74de | | | 125 | |
| 6dd74de | | | 126 | > **Note** |
| 6dd74de | | | 127 | > This changes the default behaviour of mermaid so that after upgrade to 8.2, unless the `securityLevel` is not changed, tags in flowcharts are encoded as tags and clicking is disabled. |
| 6dd74de | | | 128 | > **sandbox** security level is still in the beta version. |
| 6dd74de | | | 129 | |
| 6dd74de | | | 130 | **If you are taking responsibility for the diagram source security you can set the `securityLevel` to a value of your choosing. This allows clicks and tags are allowed.** |
| 6dd74de | | | 131 | |
| 6dd74de | | | 132 | **To change `securityLevel`, you have to call `mermaid.initialize`:** |
| 6dd74de | | | 133 | |
| 6dd74de | | | 134 | ```javascript |
| 6dd74de | | | 135 | mermaid.initialize({ |
| 6dd74de | | | 136 | securityLevel: 'loose', |
| 6dd74de | | | 137 | }); |
| 6dd74de | | | 138 | ``` |
| 6dd74de | | | 139 | |
| 6dd74de | | | 140 | ### Labels out of bounds |
| 6dd74de | | | 141 | |
| 6dd74de | | | 142 | If you use dynamically loaded fonts that are loaded through CSS, such as fonts, mermaid should wait for the whole page to load (dom + assets, particularly the fonts file). |
| 6dd74de | | | 143 | |
| 6dd74de | | | 144 | ```javascript |
| 6dd74de | | | 145 | $(document).ready(function () { |
| 6dd74de | | | 146 | mermaid.initialize(); |
| 6dd74de | | | 147 | }); |
| 6dd74de | | | 148 | ``` |
| 6dd74de | | | 149 | |
| 6dd74de | | | 150 | Not doing so will most likely result in mermaid rendering graphs that have labels out of bounds. The default integration in mermaid uses the window\.load event to start rendering. |
| 6dd74de | | | 151 | |
| 6dd74de | | | 152 | If your page has other fonts in its body those might be used instead of the mermaid font. Specifying the font in your styling is a workaround for this. |
| 6dd74de | | | 153 | |
| 6dd74de | | | 154 | ```css |
| 6dd74de | | | 155 | pre.mermaid { |
| 6dd74de | | | 156 | font-family: 'trebuchet ms', verdana, arial; |
| 6dd74de | | | 157 | } |
| 6dd74de | | | 158 | ``` |
| 6dd74de | | | 159 | |
| 6dd74de | | | 160 | ### Using `mermaid.run` |
| 6dd74de | | | 161 | |
| 6dd74de | | | 162 | mermaid.run was added in v10 and is the preferred way of handling more complex integration. |
| 6dd74de | | | 163 | By default, `mermaid.run` will be called when the document is ready, rendering all elements with `class="mermaid"`. |
| 6dd74de | | | 164 | |
| 6dd74de | | | 165 | You can customize that behavior by calling `await mermaid.run(<config>)`. |
| 6dd74de | | | 166 | |
| 6dd74de | | | 167 | `mermaid.initialize({startOnLoad: false})` will prevent `mermaid.run` from being called automatically after load. |
| 6dd74de | | | 168 | |
| 6dd74de | | | 169 | Render all elements with querySelector ".someOtherClass" |
| 6dd74de | | | 170 | |
| 6dd74de | | | 171 | ```js |
| 6dd74de | | | 172 | mermaid.initialize({ startOnLoad: false }); |
| 6dd74de | | | 173 | await mermaid.run({ |
| 6dd74de | | | 174 | querySelector: '.someOtherClass', |
| 6dd74de | | | 175 | }); |
| 6dd74de | | | 176 | ``` |
| 6dd74de | | | 177 | |
| 6dd74de | | | 178 | Render all elements passed as an array |
| 6dd74de | | | 179 | |
| 6dd74de | | | 180 | ```js |
| 6dd74de | | | 181 | mermaid.initialize({ startOnLoad: false }); |
| 6dd74de | | | 182 | await mermaid.run({ |
| 6dd74de | | | 183 | nodes: [document.getElementById('someId'), document.getElementById('anotherId')], |
| 6dd74de | | | 184 | }); |
| 6dd74de | | | 185 | await mermaid.run({ |
| 6dd74de | | | 186 | nodes: document.querySelectorAll('.yetAnotherClass'), |
| 6dd74de | | | 187 | }); |
| 6dd74de | | | 188 | ``` |
| 6dd74de | | | 189 | |
| 6dd74de | | | 190 | Render all `.mermaid` elements while suppressing any error |
| 6dd74de | | | 191 | |
| 6dd74de | | | 192 | ```js |
| 6dd74de | | | 193 | mermaid.initialize({ startOnLoad: false }); |
| 6dd74de | | | 194 | await mermaid.run({ |
| 6dd74de | | | 195 | suppressErrors: true, |
| 6dd74de | | | 196 | }); |
| 6dd74de | | | 197 | ``` |
| 6dd74de | | | 198 | |
| 6dd74de | | | 199 | ### Calling `mermaid.init` - Deprecated |
| 6dd74de | | | 200 | |
| 6dd74de | | | 201 | > **Warning** |
| 6dd74de | | | 202 | > mermaid.init is deprecated in v10 and will be removed in a future release. Please use mermaid.run instead. |
| 6dd74de | | | 203 | |
| 6dd74de | | | 204 | By default, `mermaid.init` will be called when the document is ready, finding all elements with |
| 6dd74de | | | 205 | `class="mermaid"`. If you are adding content after mermaid is loaded, or otherwise need |
| 6dd74de | | | 206 | finer-grained control of this behavior, you can call `init` yourself with: |
| 6dd74de | | | 207 | |
| 6dd74de | | | 208 | - a configuration object |
| 6dd74de | | | 209 | - some nodes, as |
| 6dd74de | | | 210 | - a node |
| 6dd74de | | | 211 | - an array-like of nodes |
| 6dd74de | | | 212 | - or W3C selector that will find your nodes |
| 6dd74de | | | 213 | |
| 6dd74de | | | 214 | Example: |
| 6dd74de | | | 215 | |
| 6dd74de | | | 216 | ```javascript |
| 6dd74de | | | 217 | mermaid.init({ noteMargin: 10 }, '.someOtherClass'); |
| 6dd74de | | | 218 | ``` |
| 6dd74de | | | 219 | |
| 6dd74de | | | 220 | Or with no config object, and a jQuery selection: |
| 6dd74de | | | 221 | |
| 6dd74de | | | 222 | ```javascript |
| 6dd74de | | | 223 | mermaid.init(undefined, $('#someId .yetAnotherClass')); |
| 6dd74de | | | 224 | ``` |
| 6dd74de | | | 225 | |
| 6dd74de | | | 226 | ## Usage with webpack |
| 6dd74de | | | 227 | |
| 6dd74de | | | 228 | mermaid fully supports webpack. Here is a [working demo](https://github.com/mermaidjs/mermaid-webpack-demo). |
| 6dd74de | | | 229 | |
| 6dd74de | | | 230 | ## API usage |
| 6dd74de | | | 231 | |
| 6dd74de | | | 232 | The main idea of the API is to be able to call a render function with the graph definition as a string. The render function will render the graph and call a callback with the resulting SVG code. With this approach it is up to the site creator to fetch the graph definition from the site (perhaps from a textarea), render it and place the graph somewhere in the site. |
| 6dd74de | | | 233 | |
| 6dd74de | | | 234 | The example below shows an example of how this could be used. The example just logs the resulting SVG to the JavaScript console. |
| 6dd74de | | | 235 | |
| 6dd74de | | | 236 | ```html |
| 6dd74de | | | 237 | <script type="module"> |
| 6dd74de | | | 238 | import mermaid from './mermaid.esm.mjs'; |
| 6dd74de | | | 239 | mermaid.initialize({ startOnLoad: false }); |
| 6dd74de | | | 240 | |
| 6dd74de | | | 241 | // Example of using the render function |
| 6dd74de | | | 242 | const drawDiagram = async function () { |
| 6dd74de | | | 243 | element = document.querySelector('#graphDiv'); |
| 6dd74de | | | 244 | const graphDefinition = 'graph TB\na-->b'; |
| 6dd74de | | | 245 | const { svg } = await mermaid.render('graphDiv', graphDefinition); |
| 6dd74de | | | 246 | element.innerHTML = svg; |
| 6dd74de | | | 247 | }; |
| 6dd74de | | | 248 | |
| 6dd74de | | | 249 | await drawDiagram(); |
| 6dd74de | | | 250 | </script> |
| 6dd74de | | | 251 | ``` |
| 6dd74de | | | 252 | |
| 6dd74de | | | 253 | To determine the type of diagram present in a given text, you can utilize the `mermaid.detectType` function, as demonstrated in the example below. |
| 6dd74de | | | 254 | |
| 6dd74de | | | 255 | ```html |
| 6dd74de | | | 256 | <script type="module"> |
| 6dd74de | | | 257 | import mermaid from './mermaid.esm.mjs'; |
| 6dd74de | | | 258 | const graphDefinition = `sequenceDiagram |
| 6dd74de | | | 259 | Pumbaa->>Timon:I ate like a pig. |
| 6dd74de | | | 260 | Timon->>Pumbaa:Pumbaa, you ARE a pig.`; |
| 6dd74de | | | 261 | try { |
| 6dd74de | | | 262 | const type = mermaid.detectType(graphDefinition); |
| 6dd74de | | | 263 | console.log(type); // 'sequence' |
| 6dd74de | | | 264 | } catch (error) { |
| 6dd74de | | | 265 | // UnknownDiagramError |
| 6dd74de | | | 266 | } |
| 6dd74de | | | 267 | </script> |
| 6dd74de | | | 268 | ``` |
| 6dd74de | | | 269 | |
| 6dd74de | | | 270 | ### Binding events |
| 6dd74de | | | 271 | |
| 6dd74de | | | 272 | Sometimes the generated graph also has defined interactions like tooltip and click events. When using the API one must |
| 6dd74de | | | 273 | add those events after the graph has been inserted into the DOM. |
| 6dd74de | | | 274 | |
| 6dd74de | | | 275 | The example code below is an extract of what mermaid does when using the API. The example shows how it is possible to |
| 6dd74de | | | 276 | bind events to an SVG when using the API for rendering. |
| 6dd74de | | | 277 | |
| 6dd74de | | | 278 | ```javascript |
| 6dd74de | | | 279 | // Example of using the bindFunctions |
| 6dd74de | | | 280 | const drawDiagram = async function () { |
| 6dd74de | | | 281 | element = document.querySelector('#graphDiv'); |
| 6dd74de | | | 282 | const graphDefinition = 'graph TB\na-->b'; |
| 6dd74de | | | 283 | const { svg, bindFunctions } = await mermaid.render('graphDiv', graphDefinition); |
| 6dd74de | | | 284 | element.innerHTML = svg; |
| 6dd74de | | | 285 | // This can also be written as `bindFunctions?.(element);` using the `?` shorthand. |
| 6dd74de | | | 286 | if (bindFunctions) { |
| 6dd74de | | | 287 | bindFunctions(element); |
| 6dd74de | | | 288 | } |
| 6dd74de | | | 289 | }; |
| 6dd74de | | | 290 | ``` |
| 6dd74de | | | 291 | |
| 6dd74de | | | 292 | 1. The graph is generated using the render call. |
| 6dd74de | | | 293 | 2. After generation the render function calls the provided callback function, in this case it's called insertSvg. |
| 6dd74de | | | 294 | 3. The callback function is called with two parameters, the SVG code of the generated graph and a function. This function binds events to the SVG **after** it is inserted into the DOM. |
| 6dd74de | | | 295 | 4. Insert the SVG code into the DOM for presentation. |
| 6dd74de | | | 296 | 5. Call the binding function that binds the events. |
| 6dd74de | | | 297 | |
| 6dd74de | | | 298 | ## Example of a marked renderer |
| 6dd74de | | | 299 | |
| 6dd74de | | | 300 | This is the renderer used for transforming the documentation from Markdown to html with mermaid diagrams in the html. |
| 6dd74de | | | 301 | |
| 6dd74de | | | 302 | ```javascript |
| 6dd74de | | | 303 | const renderer = new marked.Renderer(); |
| 6dd74de | | | 304 | renderer.code = function (code, language) { |
| 6dd74de | | | 305 | if (code.match(/^sequenceDiagram/) || code.match(/^graph/)) { |
| 6dd74de | | | 306 | return '<pre class="mermaid">' + code + '</pre>'; |
| 6dd74de | | | 307 | } else { |
| 6dd74de | | | 308 | return '<pre><code>' + code + '</code></pre>'; |
| 6dd74de | | | 309 | } |
| 6dd74de | | | 310 | }; |
| 6dd74de | | | 311 | ``` |
| 6dd74de | | | 312 | |
| 6dd74de | | | 313 | Another example in CoffeeScript that also includes the mermaid script tag in the generated markup. |
| 6dd74de | | | 314 | |
| 6dd74de | | | 315 | ```coffee |
| 6dd74de | | | 316 | marked = require 'marked' |
| 6dd74de | | | 317 | |
| 6dd74de | | | 318 | module.exports = (options) -> |
| 6dd74de | | | 319 | hasMermaid = false |
| 6dd74de | | | 320 | renderer = new marked.Renderer() |
| 6dd74de | | | 321 | renderer.defaultCode = renderer.code |
| 6dd74de | | | 322 | renderer.code = (code, language) -> |
| 6dd74de | | | 323 | if language is 'mermaid' |
| 6dd74de | | | 324 | html = '' |
| 6dd74de | | | 325 | if not hasMermaid |
| 6dd74de | | | 326 | hasMermaid = true |
| 6dd74de | | | 327 | html += '<script src="'+options.mermaidPath+'"></script>' |
| 6dd74de | | | 328 | html + '<pre class="mermaid">'+code+'</pre>' |
| 6dd74de | | | 329 | else |
| 6dd74de | | | 330 | @defaultCode(code, language) |
| 6dd74de | | | 331 | |
| 6dd74de | | | 332 | renderer |
| 6dd74de | | | 333 | ``` |
| 6dd74de | | | 334 | |
| 6dd74de | | | 335 | ## Advanced usage |
| 6dd74de | | | 336 | |
| 6dd74de | | | 337 | ### Syntax validation without rendering |
| 6dd74de | | | 338 | |
| 6dd74de | | | 339 | The `mermaid.parse(text, parseOptions)` function validates graph definitions without rendering a graph. |
| 6dd74de | | | 340 | |
| 6dd74de | | | 341 | The function `mermaid.parse(text, parseOptions)`, takes a text string as an argument and returns `{ diagramType: string }` if the definition follows mermaid's syntax. |
| 6dd74de | | | 342 | |
| 6dd74de | | | 343 | If the definition is invalid, the function returns `false` if `parseOptions.suppressErrors` is set to `true`. Otherwise, it throws an error. |
| 6dd74de | | | 344 | |
| 6dd74de | | | 345 | The parseError function will be called when the parse function throws an error. It will not be called if `parseOptions.suppressErrors` is set to `true`. |
| 6dd74de | | | 346 | |
| 6dd74de | | | 347 | It is possible to override this function in order to handle the error in an application-specific way. |
| 6dd74de | | | 348 | |
| 6dd74de | | | 349 | The code-example below in meta code illustrates how this could work: |
| 6dd74de | | | 350 | |
| 6dd74de | | | 351 | ```javascript |
| 6dd74de | | | 352 | mermaid.parseError = function (err, hash) { |
| 6dd74de | | | 353 | displayErrorInGui(err); |
| 6dd74de | | | 354 | }; |
| 6dd74de | | | 355 | |
| 6dd74de | | | 356 | const textFieldUpdated = async function () { |
| 6dd74de | | | 357 | const textStr = getTextFromFormField('code'); |
| 6dd74de | | | 358 | |
| 6dd74de | | | 359 | if (await mermaid.parse(textStr)) { |
| 6dd74de | | | 360 | reRender(textStr); |
| 6dd74de | | | 361 | } |
| 6dd74de | | | 362 | }; |
| 6dd74de | | | 363 | |
| 6dd74de | | | 364 | bindEventHandler('change', 'code', textFieldUpdated); |
| 6dd74de | | | 365 | ``` |
| 6dd74de | | | 366 | |
| 6dd74de | | | 367 | ## Configuration |
| 6dd74de | | | 368 | |
| 6dd74de | | | 369 | You can pass the required configuration to the `mermaid.initialize` call. This is the preferred way of configuring mermaid. |
| 6dd74de | | | 370 | The list of configuration objects are described [in the mermaidAPI documentation](./setup/README.md). |
| 6dd74de | | | 371 | |
| 6dd74de | | | 372 | ```html |
| 6dd74de | | | 373 | <script type="module"> |
| 6dd74de | | | 374 | import mermaid from './mermaid.esm.mjs'; |
| 6dd74de | | | 375 | let config = { startOnLoad: true, htmlLabels: true, flowchart: { useMaxWidth: false } }; |
| 6dd74de | | | 376 | mermaid.initialize(config); |
| 6dd74de | | | 377 | </script> |
| 6dd74de | | | 378 | ``` |
| 6dd74de | | | 379 | |
| 6dd74de | | | 380 | > **Note** |
| 6dd74de | | | 381 | > This is the preferred way of configuring mermaid. |
| 6dd74de | | | 382 | |
| 6dd74de | | | 383 | ### The following methods are deprecated and are kept only for backwards compatibility. |
| 6dd74de | | | 384 | |
| 6dd74de | | | 385 | ## Using the mermaid object |
| 6dd74de | | | 386 | |
| 6dd74de | | | 387 | It is possible to set some configuration via the mermaid object. The two parameters that are supported using this |
| 6dd74de | | | 388 | approach are: |
| 6dd74de | | | 389 | |
| 6dd74de | | | 390 | - mermaid.startOnLoad |
| 6dd74de | | | 391 | - mermaid.htmlLabels |
| 6dd74de | | | 392 | |
| 6dd74de | | | 393 | ```javascript |
| 6dd74de | | | 394 | mermaid.startOnLoad = true; |
| 6dd74de | | | 395 | ``` |
| 6dd74de | | | 396 | |
| 6dd74de | | | 397 | > **Warning** |
| 6dd74de | | | 398 | > This way of setting the configuration is deprecated. Instead the preferred way is to use the initialize method. This functionality is only kept for backwards compatibility. |
| 6dd74de | | | 399 | |
| 6dd74de | | | 400 | <!--- |
| 6dd74de | | | 401 | cspell:locale en,en-gb |
| 6dd74de | | | 402 | cspell:ignore pumbaa |
| 6dd74de | | | 403 | ---> |