\n * mermaid.initialize({\n * flowchart:{\n * htmlLabels: false\n * }\n * });\n * \n *\n * **Example 2:**\n * \n * <script>\n * var config = {\n * startOnLoad:true,\n * flowchart:{\n * useMaxWidth:true,\n * htmlLabels:true,\n * curve:'cardinal',\n * },\n *\n * securityLevel:'loose',\n * };\n * mermaid.initialize(config);\n * </script>\n * \n * A summary of all options and their defaults is found [here](#mermaidapi-configuration-defaults). A description of each option follows below.\n *\n * @name Configuration\n */\nconst config = {\n /**\n * theme , the CSS style sheet\n *\n * | Parameter | Description | Type | Required | Values |\n * | --- | --- | --- | --- | --- |\n * | theme | Built in Themes | string | Optional | 'default', 'forest', 'dark', 'neutral', 'null'|\n *\n * **Notes:** To disable any pre-defined mermaid theme, use \"null\".\n *\n * \n * \"theme\": \"forest\",\n * \"themeCSS\": \".node rect { fill: red; }\"\n * \n */\n theme: 'default',\n themeVariables: theme['default'].getThemeVariables(),\n themeCSS: undefined,\n /* **maxTextSize** - The maximum allowed size of the users text diamgram */\n maxTextSize: 50000,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --- | --- | --- | --- | --- |\n * | fontFamily | specifies the font to be used in the rendered diagrams| string | Required | Any Posiable CSS FontFamily |\n *\n * **Notes:**\n * Default value: '\"trebuchet ms\", verdana, arial, sans-serif;'.\n */\n fontFamily: '\"trebuchet ms\", verdana, arial, sans-serif;',\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --- | --- | --- | --- | --- |\n * | logLevel |This option decides the amount of logging to be used.| string \\| number | Required | 1, 2, 3, 4, 5 |\n *\n *\n * **Notes:**\n *\n * - debug: 1\n * - info: 2\n * - warn: 3\n * - error: 4\n * - fatal: 5 (default)\n */\n logLevel: 5,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --- | --- | --- | --- | --- |\n * | securitylevel | Level of trust for parsed diagram|string | Required | 'strict', 'loose', 'antiscript' |\n *\n * **Notes**:\n *\n * - **strict**: (**default**) tags in text are encoded, click functionality is disabeled\n * - **loose**: tags in text are allowed, click functionality is enabled\n * - **antiscript**: html tags in text are allowed, (only script element is removed), click functionality is enabled\n */\n securityLevel: 'strict',\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --- | --- | --- | --- | --- |\n * | startOnLoad | Dictates whether mermaind starts on Page load | boolean | Required | true, false |\n *\n * **Notes:** Default value: true\n */\n startOnLoad: true,\n\n /**\n * | Parameter | Description |Type | Required |Values|\n * | --- | --- | --- | --- | --- |\n * | arrowMarkerAbsolute | Controls whether or arrow markers in html code are absolute paths or anchors | boolean | Required | true, false |\n *\n *\n * **Notes**:\n *\n * This matters if you are using base tag settings.\n *\n * Default value: false\n */\n arrowMarkerAbsolute: false,\n\n /**\n * This option controls which currentConfig keys are considered _secure_ and can only be changed via\n * call to mermaidAPI.initialize. Calls to mermaidAPI.reinitialize cannot make changes to\n * the `secure` keys in the current currentConfig. This prevents malicious graph directives from\n * overriding a site's default security.\n\n * **Notes**:\n *\n * Default value: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize']\n */\n secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize'],\n\n /**\n * This option controls if the generated ids of nodes in the SVG are generated randomly or based on a seed.\n * If set to false, the IDs are generated based on the current date and thus are not deterministic. This is the default behaviour.\n *\n * **Notes**:\n *\n * This matters if your files are checked into sourcecontrol e.g. git and should not change unless content is changed.\n *\n * Default value: false\n */\n deterministicIds: false,\n\n /**\n * This option is the optional seed for deterministic ids. if set to undefined but deterministicIds is true, a simple number iterator is used.\n * You can set this attribute to base the seed on a static string.\n */\n deterministicIDSeed: undefined,\n\n /**\n * The object containing configurations specific for flowcharts\n */\n flowchart: {\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --- | --- | --- | --- | --- |\n * | diagramPadding | Amount of padding around the diagram as a whole | Integer | Required | Any Positive Value |\n *\n * **Notes:**\n *\n * The amount of padding around the diagram as a whole so that embedded diagrams have margins, expressed in pixels\n *\n * Default value: 8\n */\n diagramPadding: 8,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --- | --- | --- | --- | --- |\n * | htmlLabels | Flag for setting whether or not a html tag should be used for rendering labels on the edges. | boolean| Required | true, false |\n *\n * **Notes:** Default value: true.\n */\n htmlLabels: true,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --- | --- | --- | --- | --- |\n * | nodeSpacing | Defines the spacing between nodes on the same level | Integer | Required | Any positive Number |\n *\n * **Notes:**\n *\n * Pertains to horizontal spacing for TB (top to bottom) or BT (bottom to top) graphs, and the vertical spacing for LR as well as RL graphs.**\n *\n * Default value: 50\n */\n nodeSpacing: 50,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --- | --- | --- | --- | --- |\n * | rankSpacing | Defines the spacing between nodes on different levels | Integer | Required | Any Positive Number |\n *\n * **Notes**:\n *\n * pertains to vertical spacing for TB (top to bottom) or BT (bottom to top), and the horizontal spacing for LR as well as RL graphs.\n *\n * Default value 50\n */\n rankSpacing: 50,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --- | --- | --- | --- | --- |\n * | curve | Defines how mermaid renders curves for flowcharts. | string | Required | 'basis', 'linear', 'cardinal'|\n *\n * **Notes:**\n *\n * Default Vaue: 'basis'\n */\n curve: 'basis',\n // Only used in new experimental rendering\n // represents the padding between the labels and the shape\n padding: 15,\n\n /**\n * | Parameter | Description | Type | Required | Values|\n * | --- | --- | --- | --- | --- |\n * | useMaxWidth | See notes | boolean | 4 | true, false |\n *\n * **Notes:**\n *\n * When this flag is set the height and width is set to 100% and is then scaling with the\n * available space if not the absolute space required is used.\n *\n * Default value: true\n */\n useMaxWidth: true,\n\n /**\n * | Parameter | Description | Type | Required | Values|\n * | --- | --- | --- | --- | --- |\n * | defaultRenderer | See notes | boolean | 4 | dagre-d3, dagre-wrapper |\n *\n * **Notes:**\n *\n * Decides which rendering engine that is to be used for the rendering. Legal values are:\n * * dagre-d3\n * * dagre-wrapper - wrapper for dagre implemented in mermaid\n *\n * Default value: 'dagre-d3'\n */\n defaultRenderer: 'dagre-d3'\n },\n\n /**\n * The object containing configurations specific for sequence diagrams\n */\n sequence: {\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --- | --- | --- | --- | --- |\n * | activationWidth | Width of the activation rect | Integer | Required | Any Positive Value |\n *\n *\n * **Notes:** Default value :10\n */\n activationWidth: 10,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --- | --- | --- | --- | --- |\n * | diagramMarginX | Margin to the right and left of the sequence diagram | Integer | Required | Any Positive Value |\n *\n * **Notes:** Default value: 50\n */\n diagramMarginX: 50,\n\n /**\n *| Parameter | Description | Type | Required | Values |\n *| --- | --- | --- | --- | --- |\n *| diagramMarginY | Margin to the over and under the sequence diagram | Integer | Required | Any Positive Value |\n *\n * **Notes:** Default value: 10\n */\n diagramMarginY: 10,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --- | --- | --- | --- | --- |\n * | actorMargin | Margin between actors | Integer | Required | Any Positive Value |\n *\n * **Notes:**\n * Default value: 50\n */\n actorMargin: 50,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --- | --- | --- | --- | --- |\n * | width | Width of actor boxes | Integer | Required | Any Positive Value |\n *\n * **Notes:**\n * Default value: 150\n */\n width: 150,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --- | --- | --- | --- | --- |\n * | height | Height of actor boxes | Integer | Required | Any Positive Value|\n *\n * **Notes:**\n * Default value: 65\n */\n height: 65,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --- | --- | --- | --- | --- |\n * | boxMargin | Margin around loop boxes | Integer | Required | Any Positive Value |\n *\n * **Notes:**\n * Default value: 10\n */\n boxMargin: 10,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --- | --- | --- | --- | --- |\n * | boxTextMargin | Margin around the text in loop/alt/opt boxes | Integer | Required | Any Positive Value |\n *\n * **Notes:**\n * Default value: 5\n */\n boxTextMargin: 5,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --- | --- | --- | --- | --- |\n * | noteMargin | margin around notes | Integer | Required | Any Positive Value |\n *\n * **Notes:**\n * Default value: 10\n */\n noteMargin: 10,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --- | --- | --- | --- | --- |\n * | messageMargin | Space between messages | Integer | Required | Any Positive Value |\n *\n * **Notes:**\n * Default value: 35\n */\n messageMargin: 35,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --- | --- | --- | --- | --- |\n * | messageAlign | Multiline message alignment | string | Required | 'left', 'center', 'right' |\n *\n * **Notes:**\n * Default value: 'center'\n */\n messageAlign: 'center',\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --- | --- | --- | --- | --- |\n * | mirrorActors | Mirror actors under diagram | boolean | Required | true, false |\n *\n * **Notes:**\n * Default value: true\n */\n mirrorActors: true,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --- | --- | --- | --- | --- |\n * | bottomMarginAdj | Prolongs the edge of the diagram downwards | Integer | Required | Any Positive Value |\n *\n * **Notes:**\n *\n * Depending on css styling this might need adjustment.\n *\n * Default value: 1\n */\n bottomMarginAdj: 1,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --- | --- | --- | --- | --- |\n * | useMaxWidth | See Notes | boolean | Required | true, false |\n *\n * **Notes:**\n * When this flag is set to true, the height and width is set to 100% and is then scaling with the\n * available space. If set to false, the absolute space required is used.\n *\n * Default value: true\n */\n useMaxWidth: true,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --- | --- | --- | --- | --- |\n * | rightAngles | display curve arrows as right angles | boolean | Required | true, false |\n *\n * **Notes:**\n *\n * This will display arrows that start and begin at the same node as right angles, rather than a curve\n *\n * Default value: false\n */\n rightAngles: false,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --- | --- | --- | --- | --- |\n * | showSequenceNumbers | This will show the node numbers | boolean | Required | true, false |\n *\n * **Notes:**\n * Default value: false\n */\n showSequenceNumbers: false,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --- | --- | --- | --- | --- |\n * | actorFontSize| This sets the font size of the actor's description | Integer | Require | Any Positive Value |\n *\n ***Notes:**\n ***Default value 14**..\n */\n actorFontSize: 14,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --- | --- | --- | --- | --- |\n * | actorFontFamily |This sets the font family of the actor's description | string | Required | Any Posiable CSS FontFamily |\n *\n * **Notes:**\n * Default value: \"'Open-Sans\", \"sans-serif\"'\n */\n actorFontFamily: '\"Open-Sans\", \"sans-serif\"',\n\n /**\n * This sets the font weight of the actor's description\n *\n * **Notes:**\n * Default value: 400.\n */\n actorFontWeight: 400,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --- | --- | --- | --- | --- |\n * | noteFontSize | This sets the font size of actor-attached notes | Integer | Required | Any Positive Value |\n *\n * **Notes:**\n * Default value: 14\n */\n noteFontSize: 14,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --- | --- | --- | --- | --- |\n * | noteFontFamily| This sets the font family of actor-attached notes. | string | Required | Any Posiable CSS FontFamily |\n *\n * **Notes:**\n * Default value: ''\"trebuchet ms\", verdana, arial, sans-serif'\n */\n noteFontFamily: '\"trebuchet ms\", verdana, arial, sans-serif',\n\n /**\n * This sets the font weight of the note's description\n *\n * **Notes:**\n * Default value: 400\n */\n noteFontWeight: 400,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --- | --- | --- | --- | --- |\n * | noteAlign | This sets the text alignment of actor-attached notes | string | required | 'left', 'center', 'right'|\n *\n * **Notes:**\n * Default value: 'center'\n */\n noteAlign: 'center',\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --- | --- | --- | --- | --- |\n * | messageFontSize | This sets the font size of actor messages | Integer | Required | Any Positive Number |\n *\n * **Notes:**\n * Default value: 16\n */\n messageFontSize: 16,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --- | --- | --- | --- | --- |\n * | messageFontFamily | This sets the font family of actor messages | string | Required | Any Posiable CSS FontFamily |\n *\n * **Notes:**\n * Default value: '\"trebuchet ms\", verdana, arial, sans-serif'\n */\n messageFontFamily: '\"trebuchet ms\", verdana, arial, sans-serif',\n\n /**\n * This sets the font weight of the message's description\n *\n * **Notes:**\n * Default value: 400.\n */\n messageFontWeight: 400,\n\n /**\n * This sets the auto-wrap state for the diagram\n *\n * **Notes:**\n * Default value: false.\n */\n wrap: false,\n\n /**\n * This sets the auto-wrap padding for the diagram (sides only)\n *\n * **Notes:**\n * Default value: 0.\n */\n wrapPadding: 10,\n\n /**\n * This sets the width of the loop-box (loop, alt, opt, par)\n *\n * **Notes:**\n * Default value: 50.\n */\n labelBoxWidth: 50,\n\n /**\n * This sets the height of the loop-box (loop, alt, opt, par)\n *\n * **Notes:**\n * Default value: 20.\n */\n labelBoxHeight: 20,\n\n messageFont: function() {\n return {\n fontFamily: this.messageFontFamily,\n fontSize: this.messageFontSize,\n fontWeight: this.messageFontWeight\n };\n },\n noteFont: function() {\n return {\n fontFamily: this.noteFontFamily,\n fontSize: this.noteFontSize,\n fontWeight: this.noteFontWeight\n };\n },\n actorFont: function() {\n return {\n fontFamily: this.actorFontFamily,\n fontSize: this.actorFontSize,\n fontWeight: this.actorFontWeight\n };\n }\n },\n\n /**\n * The object containing configurations specific for gantt diagrams\n */\n gantt: {\n /**\n * ### titleTopMargin\n *\n * | Parameter | Description | Type | Required | Values |\n * | --- | --- | --- | --- | --- |\n * | titleTopMargin | Margin top for the text over the gantt diagram | Integer | Required | Any Positive Value |\n *\n * **Notes:**\n * Default value: 25\n */\n titleTopMargin: 25,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --- | --- | --- | --- | --- |\n * | barHeight | The height of the bars in the graph | Integer | Required | Any Positive Value |\n *\n * **Notes:**\n * Default value: 20\n */\n barHeight: 20,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --- | --- | --- | --- | --- |\n * | barGap | The margin between the different activities in the gantt diagram | Integer | Optional | Any Positive Value |\n *\n * **Notes:**\n * Default value: 4\n */\n barGap: 4,\n\n /**\n * | Parameter | Description | Type | Required | Values|\n * | --- | --- | --- | --- | --- |\n * | topPadding | Margin between title and gantt diagram and between axis and gantt diagram. | Integer | Required | Any Positive Value |\n *\n * **Notes:**\n * Default value: 50\n */\n topPadding: 50,\n\n /**\n * | Parameter | Description | Type | Required | Values|\n * | --- | --- | --- | --- | --- |\n * | rightPadding | The space allocated for the section name to the right of the activities | Integer | Required | Any Positive Value |\n *\n * **Notes:**\n * Default value: 75\n */\n rightPadding: 75,\n\n /**\n * | Parameter | Description | Type | Required | Values|\n * | --- | --- | --- | --- | --- |\n * | leftPadding | The space allocated for the section name to the left of the activities | Integer | Required | Any Positive Value |\n *\n * **Notes:**\n * Default value: 75\n */\n leftPadding: 75,\n\n /**\n * | Parameter | Description | Type | Required | Values|\n * | --- | --- | --- | --- | --- |\n * | gridLineStartPadding | Vertical starting position of the grid lines | Integer | Required | Any Positive Value |\n *\n * **Notes:**\n * Default value: 35\n */\n gridLineStartPadding: 35,\n\n /**\n * | Parameter | Description | Type | Required | Values|\n * | --- | --- | --- | --- | --- |\n * | fontSize | Font size | Integer | Required | Any Positive Value |\n *\n * **Notes:**\n * Default value: 11\n */\n fontSize: 11,\n\n /**\n * | Parameter | Description | Type | Required | Values|\n * | --- | --- | --- | --- | --- |\n * | sectionFontSize | Font size for secions| Integer | Required | Any Positive Value |\n *\n * **Notes:**\n * Default value: 11\n */\n sectionFontSize: 11,\n\n /**\n * | Parameter | Description | Type | Required | Values|\n * | --- | --- | --- | --- | --- |\n * | numberSectionStyles | The number of alternating section styles | Integer | 4 | Any Positive Value |\n *\n * **Notes:**\n * Default value: 4\n */\n numberSectionStyles: 4,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --- | --- | --- | --- | --- |\n * | axisFormat | Datetime format of the axis | 3 | Required | Date in yy-mm-dd |\n *\n * **Notes:**\n *\n * This might need adjustment to match your locale and preferences\n *\n * Default value: '%Y-%m-%d'.\n */\n axisFormat: '%Y-%m-%d',\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --- | --- | --- | --- | --- |\n * | useMaxWidth | See notes | boolean | 4 | true, false |\n *\n * **Notes:**\n *\n * When this flag is set the height and width is set to 100% and is then scaling with the\n * available space if not the absolute space required is used.\n *\n * Default value: true\n */\n useMaxWidth: true,\n\n /**\n *| Parameter | Description |Type | Required | Values|\n *| --- | --- | --- | --- | --- |\n *| topAxis | See notes | Boolean | 4 | True, False |\n *\n ***Notes:** when this flag is set date labels will be added to the\ntop of the chart\n *\n ***Default value false**.\n */\n topAxis: false,\n\n useWidth: undefined\n },\n\n /**\n * The object containing configurations specific for journey diagrams\n */\n journey: {\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --- | --- | --- | --- | --- |\n * | diagramMarginX | Margin to the right and left of the sequence diagram | Integer | Required | Any Positive Value |\n *\n * **Notes:**\n * Default value: 50\n */\n diagramMarginX: 50,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --- | --- | --- | --- | --- |\n * | diagramMarginY | Margin to the over and under the sequence diagram. | Integer | Required | Any Positive Value |\n *\n * **Notes:**\n * Default value: 10\n */\n diagramMarginY: 10,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --- | --- | --- | --- | --- |\n * | actorMargin | Margin between actors | Integer | Required | Any Positive Value |\n *\n * **Notes:**\n * Default value: 50\n */\n leftMargin: 150,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --- | --- | --- | --- | --- |\n * | width | Width of actor boxes | Integer | Required | Any Positive Value |\n *\n * **Notes:**\n * Default value: 150\n */\n width: 150,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --- | --- | --- | --- | --- |\n * | height | Height of actor boxes | Integer | Required | Any Positive Value |\n *\n * **Notes:**\n * Default value: 65\n */\n height: 50,\n\n /**\n *| Parameter | Description |Type | Required | Values|\n *| --- | --- | --- | --- | --- |\n *| boxMargin | Margin around loop boxes | Integer | Required | Any Positive Value |\n *\n * **Notes:**\n * Default value: 10\n */\n boxMargin: 10,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --- | --- | --- | --- | --- |\n * | boxTextMargin | Margin around the text in loop/alt/opt boxes | Integer | Required | Any Positive Value |\n *\n * **Notes:**\n * Default value: 5\n */\n boxTextMargin: 5,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --- | --- | --- | --- | --- |\n * | noteMargin | Margin around notes | Integer | Required | Any Positive Value |\n *\n * **Notes:**\n * Default value: 10\n */\n noteMargin: 10,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --- | --- | --- | --- | --- |\n * | messageMargin |Space between messages. | Integer | Required | Any Positive Value |\n *\n * **Notes:**\n *\n * Space between messages.\n *\n * Default value: 35\n */\n messageMargin: 35,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --- | --- | --- | --- | --- |\n * | messageAlign | Multiline message alignment | 3 | 4 | 'left', 'center', 'right' |\n *\n * **Notes:**\n * Default value: 'center'\n */\n messageAlign: 'center',\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --- | --- | --- | --- | --- |\n * | bottomMarginAdj | Prolongs the edge of the diagram downwards | Integer | 4 | Any Positive Value |\n *\n * **Notes:**\n *\n * Depending on css styling this might need adjustment.\n *\n * Default value: 1\n */\n bottomMarginAdj: 1,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --- | --- | --- | --- | --- |\n * | useMaxWidth | See notes | boolean | 4 | true, false |\n *\n * **Notes:**\n *\n * When this flag is set the height and width is set to 100% and is then scaling with the\n * available space if not the absolute space required is used.\n *\n * Default value: true\n */\n useMaxWidth: true,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --- | --- | --- | --- | --- |\n * | rightAngles | Curved Arrows become Right Angles | 3 | 4 | true, false |\n *\n * **Notes:**\n *\n * This will display arrows that start and begin at the same node as right angles, rather than a curves\n *\n * Default value: false\n */\n rightAngles: false,\n taskFontSize: 14,\n taskFontFamily: '\"Open-Sans\", \"sans-serif\"',\n taskMargin: 50,\n // width of activation box\n activationWidth: 10,\n\n // text placement as: tspan | fo | old only text as before\n textPlacement: 'fo',\n actorColours: ['#8FBC8F', '#7CFC00', '#00FFFF', '#20B2AA', '#B0E0E6', '#FFFFE0'],\n\n sectionFills: ['#191970', '#8B008B', '#4B0082', '#2F4F4F', '#800000', '#8B4513', '#00008B'],\n sectionColours: ['#fff']\n },\n class: {\n arrowMarkerAbsolute: false,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --- | --- | --- | --- | --- |\n * | useMaxWidth | See notes | boolean | 4 | true, false |\n *\n * **Notes:**\n *\n * When this flag is set the height and width is set to 100% and is then scaling with the\n * available space if not the absolute space required is used.\n *\n * Default value: true\n */\n useMaxWidth: true,\n /**\n * | Parameter | Description | Type | Required | Values|\n * | --- | --- | --- | --- | --- |\n * | defaultRenderer | See notes | boolean | 4 | dagre-d3, dagre-wrapper |\n *\n * **Notes:**\n *\n * Decides which rendering engine that is to be used for the rendering. Legal values are:\n * * dagre-d3\n * * dagre-wrapper - wrapper for dagre implemented in mermaid\n *\n * Default value: 'dagre-d3'\n */\n defaultRenderer: 'dagre-d3'\n },\n git: {\n arrowMarkerAbsolute: false,\n\n useWidth: undefined,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --- | --- | --- | --- | --- |\n * | useMaxWidth | See notes | boolean | 4 | true, false |\n *\n * **Notes:**\n *\n * When this flag is set the height and width is set to 100% and is then scaling with the\n * available space if not the absolute space required is used.\n *\n * Default value: true\n */\n useMaxWidth: true\n },\n state: {\n dividerMargin: 10,\n sizeUnit: 5,\n padding: 8,\n textHeight: 10,\n titleShift: -15,\n noteMargin: 10,\n forkWidth: 70,\n forkHeight: 7,\n // Used\n miniPadding: 2,\n // Font size factor, this is used to guess the width of the edges labels before rendering by dagre\n // layout. This might need updating if/when switching font\n fontSizeFactor: 5.02,\n fontSize: 24,\n labelHeight: 16,\n edgeLengthFactor: '20',\n compositTitleSize: 35,\n radius: 5,\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --- | --- | --- | --- | --- |\n * | useMaxWidth | See notes | boolean | 4 | true, false |\n *\n * **Notes:**\n *\n * When this flag is set the height and width is set to 100% and is then scaling with the\n * available space if not the absolute space required is used.\n *\n * Default value: true\n */\n useMaxWidth: true,\n /**\n * | Parameter | Description | Type | Required | Values|\n * | --- | --- | --- | --- | --- |\n * | defaultRenderer | See notes | boolean | 4 | dagre-d3, dagre-wrapper |\n *\n * **Notes:**\n *\n * Decides which rendering engine that is to be used for the rendering. Legal values are:\n * * dagre-d3\n * * dagre-wrapper - wrapper for dagre implemented in mermaid\n *\n * Default value: 'dagre-d3'\n */\n defaultRenderer: 'dagre-d3'\n },\n\n /**\n * The object containing configurations specific for entity relationship diagrams\n */\n er: {\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --- | --- | --- | --- | --- |\n * | diagramPadding | Amount of padding around the diagram as a whole | Integer | Required | Any Positive Value |\n *\n * **Notes:**\n *\n * The amount of padding around the diagram as a whole so that embedded diagrams have margins, expressed in pixels\n *\n * Default value: 20\n */\n diagramPadding: 20,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --- | --- | --- | --- | --- |\n * | layoutDirection | Directional bias for layout of entities. | string | Required | \"TB\", \"BT\", \"LR\", \"RL\" |\n *\n * **Notes:**\n *\n * 'TB' for Top-Bottom, 'BT'for Bottom-Top, 'LR' for Left-Right, or 'RL' for Right to Left.\n *\n * T = top, B = bottom, L = left, and R = right.\n *\n * Default value: 'TB'\n */\n layoutDirection: 'TB',\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --- | --- | --- | --- | --- |\n * | minEntityWidth | The mimimum width of an entity box | Integer | Required | Any Positive Value |\n *\n * **Notes:**\n * Expressed in pixels.\n * Default value: 100\n */\n minEntityWidth: 100,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --- | --- | --- | --- | --- |\n * | minEntityHeight| The minimum height of an entity box | Integer | 4 | Any Positive Value |\n *\n * **Notes:**\n * Expressed in pixels\n * Default value: 75\n */\n minEntityHeight: 75,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --- | --- | --- | --- | --- |\n * | entityPadding | Minimum internal padding betweentext in box and box borders | Integer | 4 | Any Positive Value |\n *\n * **Notes:**\n *\n * The minimum internal padding betweentext in an entity box and the enclosing box borders, expressed in pixels.\n *\n * Default value: 15\n */\n entityPadding: 15,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --- | --- | --- | --- | --- |\n * | stroke | Stroke color of box edges and lines | string | 4 | Any recognized color |\n *\n * **Notes:**\n * Default value: 'gray'\n */\n stroke: 'gray',\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --- | --- | --- | --- | --- |\n * | fill | Fill color of entity boxes | string | 4 | Any recognized color |\n *\n * **Notes:**\n * Default value: 'honeydew'\n */\n fill: 'honeydew',\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --- | --- | --- | --- | --- |\n * | fontSize | Font Size in pixels | Integer | | Any Positive Value |\n *\n * **Notes:**\n *\n * Font size (expressed as an integer representing a number of pixels)\n * Default value: 12\n */\n fontSize: 12,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --- | --- | --- | --- | --- |\n * | useMaxWidth | See Notes | boolean | Required | true, false |\n *\n * **Notes:**\n *\n * When this flag is set to true, the diagram width is locked to 100% and\n * scaled based on available space. If set to false, the diagram reserves its\n * absolute width.\n *\n * Default value: true\n */\n useMaxWidth: true\n },\n\n /**\n * The object containing configurations specific for pie diagrams\n */\n pie: {\n useWidth: undefined,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --- | --- | --- | --- | --- |\n * | useMaxWidth | See Notes | boolean | Required | true, false |\n *\n * **Notes:**\n *\n * When this flag is set to true, the diagram width is locked to 100% and\n * scaled based on available space. If set to false, the diagram reserves its\n * absolute width.\n *\n * Default value: true\n */\n useMaxWidth: true\n },\n\n /**\n * The object containing configurations specific for req diagrams\n */\n requirement: {\n useWidth: undefined,\n\n /**\n * | Parameter | Description | Type | Required | Values |\n * | --- | --- | --- | --- | --- |\n * | useMaxWidth | See Notes | boolean | Required | true, false |\n *\n * **Notes:**\n *\n * When this flag is set to true, the diagram width is locked to 100% and\n * scaled based on available space. If set to false, the diagram reserves its\n * absolute width.\n *\n * Default value: true\n */\n useMaxWidth: true,\n\n rect_fill: '#f9f9f9',\n text_color: '#333',\n rect_border_size: '0.5px',\n rect_border_color: '#bbb',\n rect_min_width: 200,\n rect_min_height: 200,\n fontSize: 14,\n rect_padding: 10,\n line_height: 20\n }\n};\n\nconfig.class.arrowMarkerAbsolute = config.arrowMarkerAbsolute;\nconfig.git.arrowMarkerAbsolute = config.arrowMarkerAbsolute;\n\nexport default config;\n","import { select } from 'd3';\nimport { log } from '../../logger';\nimport * as configApi from '../../config';\nimport common from '../common/common';\nimport utils from '../../utils';\nimport mermaidAPI from '../../mermaidAPI';\n\nconst MERMAID_DOM_ID_PREFIX = 'classid-';\n\nlet relations = [];\nlet classes = {};\nlet classCounter = 0;\n\nlet funs = [];\n\nexport const parseDirective = function(statement, context, type) {\n mermaidAPI.parseDirective(this, statement, context, type);\n};\n\nconst splitClassNameAndType = function(id) {\n let genericType = '';\n let className = id;\n\n if (id.indexOf('~') > 0) {\n let split = id.split('~');\n className = split[0];\n\n genericType = split[1];\n }\n\n return { className: className, type: genericType };\n};\n\n/**\n * Function called by parser when a node definition has been found.\n * @param id\n * @public\n */\nexport const addClass = function(id) {\n let classId = splitClassNameAndType(id);\n // Only add class if not exists\n if (typeof classes[classId.className] !== 'undefined') return;\n\n classes[classId.className] = {\n id: classId.className,\n type: classId.type,\n cssClasses: [],\n methods: [],\n members: [],\n annotations: [],\n domId: MERMAID_DOM_ID_PREFIX + classId.className + '-' + classCounter\n };\n\n classCounter++;\n};\n\n/**\n * Function to lookup domId from id in the graph definition.\n * @param id\n * @public\n */\nexport const lookUpDomId = function(id) {\n const classKeys = Object.keys(classes);\n for (let i = 0; i < classKeys.length; i++) {\n if (classes[classKeys[i]].id === id) {\n return classes[classKeys[i]].domId;\n }\n }\n};\n\nexport const clear = function() {\n relations = [];\n classes = {};\n funs = [];\n funs.push(setupToolTips);\n};\n\nexport const getClass = function(id) {\n return classes[id];\n};\nexport const getClasses = function() {\n return classes;\n};\n\nexport const getRelations = function() {\n return relations;\n};\n\nexport const addRelation = function(relation) {\n log.debug('Adding relation: ' + JSON.stringify(relation));\n addClass(relation.id1);\n addClass(relation.id2);\n\n relation.id1 = splitClassNameAndType(relation.id1).className;\n relation.id2 = splitClassNameAndType(relation.id2).className;\n\n relations.push(relation);\n};\n\n/**\n * Adds an annotation to the specified class\n * Annotations mark special properties of the given type (like 'interface' or 'service')\n * @param className The class name\n * @param annotation The name of the annotation without any brackets\n * @public\n */\nexport const addAnnotation = function(className, annotation) {\n const validatedClassName = splitClassNameAndType(className).className;\n classes[validatedClassName].annotations.push(annotation);\n};\n\n/**\n * Adds a member to the specified class\n * @param className The class name\n * @param member The full name of the member.\n * If the member is enclosed in <\n * Additionally, dissimilar types will not clobber unless the config.clobber parameter === true. Example:\n * ```\n * let config_0 = { foo: { bar: 'bar' }, bar: 'foo' };\n * let config_1 = { foo: 'foo', bar: 'bar' };\n * let result = assignWithDepth(config_0, config_1);\n * console.log(result);\n * //-> result: { foo: { bar: 'bar' }, bar: 'bar' }\n * ```\n *
\n * Traditional Object.assign would have clobbered foo in config_0 with foo in config_1.\n *
\n * If src is a destructured array of objects and dst is not an array, assignWithDepth will apply each element of src to dst\n * in order.\n * @param dst:any - the destination of the merge\n * @param src:any - the source object(s) to merge into destination\n * @param config:{ depth: number, clobber: boolean } - depth: depth to traverse within src and dst for merging -\n * clobber: should dissimilar types clobber (default: { depth: 2, clobber: false })\n * @returns {*}\n */\nexport const assignWithDepth = function(dst, src, config) {\n const { depth, clobber } = Object.assign({ depth: 2, clobber: false }, config);\n if (Array.isArray(src) && !Array.isArray(dst)) {\n src.forEach(s => assignWithDepth(dst, s, config));\n return dst;\n } else if (Array.isArray(src) && Array.isArray(dst)) {\n src.forEach(s => {\n if (dst.indexOf(s) === -1) {\n dst.push(s);\n }\n });\n return dst;\n }\n if (typeof dst === 'undefined' || depth <= 0) {\n if (dst !== undefined && dst !== null && typeof dst === 'object' && typeof src === 'object') {\n return Object.assign(dst, src);\n } else {\n return src;\n }\n }\n if (typeof src !== 'undefined' && typeof dst === 'object' && typeof src === 'object') {\n Object.keys(src).forEach(key => {\n if (\n typeof src[key] === 'object' &&\n (dst[key] === undefined || typeof dst[key] === 'object')\n ) {\n if (dst[key] === undefined) {\n dst[key] = Array.isArray(src[key]) ? [] : {};\n }\n dst[key] = assignWithDepth(dst[key], src[key], { depth: depth - 1, clobber });\n } else if (clobber || (typeof dst[key] !== 'object' && typeof src[key] !== 'object')) {\n dst[key] = src[key];\n }\n });\n }\n return dst;\n};\n\nexport const getTextObj = function() {\n return {\n x: 0,\n y: 0,\n fill: undefined,\n anchor: 'start',\n style: '#666',\n width: 100,\n height: 100,\n textMargin: 0,\n rx: 0,\n ry: 0,\n valign: undefined\n };\n};\n\nexport const drawSimpleText = function(elem, textData) {\n // Remove and ignore br:s\n const nText = textData.text.replace(common.lineBreakRegex, ' ');\n\n const textElem = elem.append('text');\n textElem.attr('x', textData.x);\n textElem.attr('y', textData.y);\n textElem.style('text-anchor', textData.anchor);\n textElem.style('font-family', textData.fontFamily);\n textElem.style('font-size', textData.fontSize);\n textElem.style('font-weight', textData.fontWeight);\n textElem.attr('fill', textData.fill);\n if (typeof textData.class !== 'undefined') {\n textElem.attr('class', textData.class);\n }\n\n const span = textElem.append('tspan');\n span.attr('x', textData.x + textData.textMargin * 2);\n span.attr('fill', textData.fill);\n span.text(nText);\n\n return textElem;\n};\n\nexport const wrapLabel = memoize(\n (label, maxWidth, config) => {\n if (!label) {\n return label;\n }\n config = Object.assign(\n { fontSize: 12, fontWeight: 400, fontFamily: 'Arial', joinWith: '
' },\n config\n );\n if (common.lineBreakRegex.test(label)) {\n return label;\n }\n const words = label.split(' ');\n const completedLines = [];\n let nextLine = '';\n words.forEach((word, index) => {\n const wordLength = calculateTextWidth(`${word} `, config);\n const nextLineLength = calculateTextWidth(nextLine, config);\n if (wordLength > maxWidth) {\n const { hyphenatedStrings, remainingWord } = breakString(word, maxWidth, '-', config);\n completedLines.push(nextLine, ...hyphenatedStrings);\n nextLine = remainingWord;\n } else if (nextLineLength + wordLength >= maxWidth) {\n completedLines.push(nextLine);\n nextLine = word;\n } else {\n nextLine = [nextLine, word].filter(Boolean).join(' ');\n }\n const currentWord = index + 1;\n const isLastWord = currentWord === words.length;\n if (isLastWord) {\n completedLines.push(nextLine);\n }\n });\n return completedLines.filter(line => line !== '').join(config.joinWith);\n },\n (label, maxWidth, config) =>\n `${label}-${maxWidth}-${config.fontSize}-${config.fontWeight}-${config.fontFamily}-${config.joinWith}`\n);\n\nconst breakString = memoize(\n (word, maxWidth, hyphenCharacter = '-', config) => {\n config = Object.assign(\n { fontSize: 12, fontWeight: 400, fontFamily: 'Arial', margin: 0 },\n config\n );\n const characters = word.split('');\n const lines = [];\n let currentLine = '';\n characters.forEach((character, index) => {\n const nextLine = `${currentLine}${character}`;\n const lineWidth = calculateTextWidth(nextLine, config);\n if (lineWidth >= maxWidth) {\n const currentCharacter = index + 1;\n const isLastLine = characters.length === currentCharacter;\n const hyphenatedNextLine = `${nextLine}${hyphenCharacter}`;\n lines.push(isLastLine ? nextLine : hyphenatedNextLine);\n currentLine = '';\n } else {\n currentLine = nextLine;\n }\n });\n return { hyphenatedStrings: lines, remainingWord: currentLine };\n },\n (word, maxWidth, hyphenCharacter = '-', config) =>\n `${word}-${maxWidth}-${hyphenCharacter}-${config.fontSize}-${config.fontWeight}-${config.fontFamily}`\n);\n\n/**\n * This calculates the text's height, taking into account the wrap breaks and\n * both the statically configured height, width, and the length of the text (in pixels).\n *\n * If the wrapped text text has greater height, we extend the height, so it's\n * value won't overflow.\n *\n * @return - The height for the given text\n * @param text the text to measure\n * @param config - the config for fontSize, fontFamily, and fontWeight all impacting the resulting size\n */\nexport const calculateTextHeight = function(text, config) {\n config = Object.assign(\n { fontSize: 12, fontWeight: 400, fontFamily: 'Arial', margin: 15 },\n config\n );\n return calculateTextDimensions(text, config).height;\n};\n\n/**\n * This calculates the width of the given text, font size and family.\n *\n * @return - The width for the given text\n * @param text - The text to calculate the width of\n * @param config - the config for fontSize, fontFamily, and fontWeight all impacting the resulting size\n */\nexport const calculateTextWidth = function(text, config) {\n config = Object.assign({ fontSize: 12, fontWeight: 400, fontFamily: 'Arial' }, config);\n return calculateTextDimensions(text, config).width;\n};\n\n/**\n * This calculates the dimensions of the given text, font size, font family, font weight, and margins.\n *\n * @return - The width for the given text\n * @param text - The text to calculate the width of\n * @param config - the config for fontSize, fontFamily, fontWeight, and margin all impacting the resulting size\n */\nexport const calculateTextDimensions = memoize(\n function(text, config) {\n config = Object.assign({ fontSize: 12, fontWeight: 400, fontFamily: 'Arial' }, config);\n const { fontSize, fontFamily, fontWeight } = config;\n if (!text) {\n return { width: 0, height: 0 };\n }\n\n // We can't really know if the user supplied font family will render on the user agent;\n // thus, we'll take the max width between the user supplied font family, and a default\n // of sans-serif.\n const fontFamilies = ['sans-serif', fontFamily];\n const lines = text.split(common.lineBreakRegex);\n let dims = [];\n\n const body = select('body');\n // We don't want to leak DOM elements - if a removal operation isn't available\n // for any reason, do not continue.\n if (!body.remove) {\n return { width: 0, height: 0, lineHeight: 0 };\n }\n\n const g = body.append('svg');\n\n for (let fontFamily of fontFamilies) {\n let cheight = 0;\n let dim = { width: 0, height: 0, lineHeight: 0 };\n for (let line of lines) {\n const textObj = getTextObj();\n textObj.text = line;\n const textElem = drawSimpleText(g, textObj)\n .style('font-size', fontSize)\n .style('font-weight', fontWeight)\n .style('font-family', fontFamily);\n\n let bBox = (textElem._groups || textElem)[0][0].getBBox();\n dim.width = Math.round(Math.max(dim.width, bBox.width));\n cheight = Math.round(bBox.height);\n dim.height += cheight;\n dim.lineHeight = Math.round(Math.max(dim.lineHeight, cheight));\n }\n dims.push(dim);\n }\n\n g.remove();\n\n let index =\n isNaN(dims[1].height) ||\n isNaN(dims[1].width) ||\n isNaN(dims[1].lineHeight) ||\n (dims[0].height > dims[1].height &&\n dims[0].width > dims[1].width &&\n dims[0].lineHeight > dims[1].lineHeight)\n ? 0\n : 1;\n return dims[index];\n },\n (text, config) => `${text}-${config.fontSize}-${config.fontWeight}-${config.fontFamily}`\n);\n\nconst d3Attrs = function(d3Elem, attrs) {\n for (let attr of attrs) {\n d3Elem.attr(attr[0], attr[1]);\n }\n};\n\nexport const calculateSvgSizeAttrs = function(height, width, useMaxWidth) {\n let attrs = new Map();\n attrs.set('height', height);\n if (useMaxWidth) {\n attrs.set('width', '100%');\n attrs.set('style', `max-width: ${width}px;`);\n } else {\n attrs.set('width', width);\n }\n return attrs;\n};\n\nexport const configureSvgSize = function(svgElem, height, width, useMaxWidth) {\n const attrs = calculateSvgSizeAttrs(height, width, useMaxWidth);\n d3Attrs(svgElem, attrs);\n};\n\nexport const initIdGeneratior = class iterator {\n constructor(deterministic, seed) {\n this.deterministic = deterministic;\n this.seed = seed;\n\n this.count = seed ? seed.length : 0;\n }\n\n next() {\n if (!this.deterministic) return Date.now();\n\n return this.count++;\n }\n};\n\nexport default {\n assignWithDepth,\n wrapLabel,\n calculateTextHeight,\n calculateTextWidth,\n calculateTextDimensions,\n calculateSvgSizeAttrs,\n configureSvgSize,\n detectInit,\n detectDirective,\n detectType,\n isSubstringInArray,\n interpolateToCurve,\n calcLabelPosition,\n calcCardinalityPosition,\n calcTerminalLabelPosition,\n formatUrl,\n getStylesFromArray,\n generateId,\n random,\n memoize,\n runFunc,\n initIdGeneratior\n};\n","module.exports = require(\"@braintree/sanitize-url\");","module.exports = require(\"d3\");","module.exports = require(\"dagre\");","module.exports = require(\"dagre-d3\");","module.exports = require(\"dagre-d3/lib/label/add-html-label.js\");","module.exports = require(\"entity-decode/browser\");","module.exports = require(\"graphlib\");","module.exports = require(\"khroma\");","module.exports = require(\"moment-mini\");","module.exports = require(\"stylis\");"],"sourceRoot":""}