\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 /** theme , the CSS style sheet\n *\n * theme , the CSS style sheet\n *\n *| Parameter | Description |Type | Required | Values|\n *| --- | --- | --- | --- | --- |\n *| Theme |Built in Themes| String | Optional | Values include, default, forest, dark, neutral, null|\n *\n ***Notes:**To disable any pre-defined mermaid theme, use \"null\".\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 | Trebuchet MS, Verdana, Arial, Sans-Serif |\n *\n ***notes: Default value is \\\\\"trebuchet ms\\\\\".\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 | Required | 1, 2, 3, 4, 5 |\n *\n *\n ***Notes:**\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 *- **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:**\n ***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**: This matters if you are using base tag settings.\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 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**: This matters if your files are checked into sourcecontrol e.g. git and should not change unless content is changed.\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:**The amount of padding around the diagram as a whole so that embedded diagrams have margins, expressed in pixels\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 Numbers |\n *\n ***Notes:\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 ***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 Numbers |\n *\n ***Notes: 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 ***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 *Default Vaue: monotoneX**\n */\n curve: 'natural',\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:**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 /**\n * The object containing configurations specific for sequence diagrams\n */\n sequence: {\n /**\n * widt of the activation rect\n * **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 Values |\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 Values|\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 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 *\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 *\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 *\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 ***Default value 35**.\n */\n messageMargin: 35,\n\n /**\n *| Parameter | Description |Type | Required | Values|\n *| --- | --- | --- | --- | --- |\n *| messageAlign | Multiline message alignment | Integer | Required | left, center, right |\n *\n ***Notes:**center **default**\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 *\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:**Depending on css styling this might need adjustment.\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 ***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 ***Default value false**.\n */\n rightAngles: false,\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 *| 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 *| Parameter | Description |Type | Required | Values|\n *| --- | --- | --- | --- | --- |\n *| actorFontFamily |This sets the font family of the actor's description | 3 | 4 | Open-Sans, Sans-Serif |\n *\n ***Notes:**\n ***Default value \"Open-Sans\", \"sans-serif\"**.\n */\n actorFontFamily: '\"Open-Sans\", \"sans-serif\"',\n /**\n * This sets the font weight of the actor's description\n * **Default value 400.\n */\n actorFontWeight: 400,\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 *| Parameter | Description |Type | Required | Values|\n *| --- | --- | --- | --- | --- |\n *| noteFontFamily| This sets the font family of actor-attached notes. | String | Required | trebuchet ms, verdana, arial, sans-serif |\n *\n ***Notes:**\n ***Default value: trebuchet ms **.\n */\n noteFontFamily: '\"trebuchet ms\", verdana, arial, sans-serif',\n /**\n * This sets the font weight of the note's description\n * **Default value 400.\n */\n noteFontWeight: 400,\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 *| 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 *| Parameter | Description |Type | Required | Values|\n *| --- | --- | --- | --- | --- |\n *| messageFontFamily | This sets the font family of actor messages. | String| Required | trebuchet ms\", verdana, arial, sans-serif |\n *\n ***Notes:**\n ***Default value: \"trebuchet ms**.\n */\n messageFontFamily: '\"trebuchet ms\", verdana, arial, sans-serif',\n /**\n * This sets the font weight of the message's description\n * **Default value 400.\n */\n messageFontWeight: 400,\n /**\n * This sets the auto-wrap state for the diagram\n * **Default value false.\n */\n wrap: false,\n /**\n * This sets the auto-wrap padding for the diagram (sides only)\n * **Default value 10.\n */\n wrapPadding: 10,\n /**\n * This sets the width of the loop-box (loop, alt, opt, par)\n * **Default value 50.\n */\n labelBoxWidth: 50,\n /**\n * This sets the height of the loop-box (loop, alt, opt, par)\n * **Default value 20.\n */\n labelBoxHeight: 20,\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 rightPadding: 75,\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 *| 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 ***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:**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 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 */\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 ***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:**default: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:**Depending on css styling this might need adjustment.\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:**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:**This will display arrows that start and begin at the same node as right angles, rather than a curves\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 *| Parameter | Description |Type | Required | Values|\n *| --- | --- | --- | --- | --- |\n *| useMaxWidth | See notes | Boolean | 4 | True, False |\n *\n ***Notes:**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 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:**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:**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 /**\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:**The amount of padding around the diagram as a whole so that embedded diagrams have margins, expressed in pixels\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 *'TB' for Top-Bottom, 'BT'for Bottom-Top, 'LR' for Left-Right, or 'RL' for Right to Left.\n * T = top, B = bottom, L = left, and R = right.\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:**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:**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:**The minimum internal padding betweentext in an entity box and the enclosing box borders, expressed in pixels.\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 ***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:**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 *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 ***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 *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 ***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 *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 ***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 = function(deterministic, seed) {\n if (!deterministic) return { next: () => Date.now() };\n class iterator {\n constructor() {\n return (this.count = seed ? seed.length : 0);\n }\n next() {\n return this.count++;\n }\n }\n return new iterator();\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":""}