\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 | Verdana, Arial, Trebuchet MS,|\n *\n ***notes: Default value is \\\\\"trebuchet ms\\\\\".\n */\n fontFamily: '\"trebuchet ms\", verdana, arial;',\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 * 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: Linear**\n */\n curve: 'linear',\n // Only used in new experimental rendering\n // repreesents the padding between the labels and the shape\n padding: 15\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 |\n *\n ***Notes:**\n ***Default value: trebuchet ms **.\n */\n noteFontFamily: '\"trebuchet ms\", verdana, arial',\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, aria |\n *\n ***Notes:**\n ***Default value:\"trebuchet ms**.\n */\n messageFontFamily: '\"trebuchet ms\", verdana, arial',\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\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 *| fontFamily | font Family | string | required |\"Open-Sans\", \"sans-serif\" |\n *\n ***Notes:**\n *\n ***Default value '\"Open-Sans\", \"sans-serif\"'**.\n */\n fontFamily: '\"Open-Sans\", \"sans-serif\"',\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 * The object containing configurations specific for sequence 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 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 */\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 },\n class: {\n arrowMarkerAbsolute: false\n },\n git: {\n arrowMarkerAbsolute: false\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\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// debugger;\nconfig.class.arrowMarkerAbsolute = config.arrowMarkerAbsolute;\nconfig.git.arrowMarkerAbsolute = config.arrowMarkerAbsolute;\nexport const defaultConfig = Object.freeze(config);\n\nconst siteConfig = assignWithDepth({}, defaultConfig);\nconst currentConfig = assignWithDepth({}, defaultConfig);\n\n/**\n *## setSiteConfig\n *| Function | Description | Type | Values |\n *| --------- | ------------------- | ------- | ------------------ |\n *| setSiteConfig|Sets the siteConfig to desired values | Put Request | Any Values, except ones in secure array|\n ***Notes:**\n *Sets the siteConfig. The siteConfig is a protected configuration for repeat use. Calls to reset() will reset\n *the currentConfig to siteConfig. Calls to reset(configApi.defaultConfig) will reset siteConfig and currentConfig\n *to the defaultConfig\n *Note: currentConfig is set in this function\n **Default value: At default, will mirror Global Config**\n * @param conf - the base currentConfig to use as siteConfig\n * @returns {*} - the siteConfig\n */\nexport const setSiteConfig = conf => {\n Object.keys(conf).forEach(key => {\n const manipulator = manipulators[key];\n conf[key] = manipulator ? manipulator(conf[key]) : conf[key];\n });\n\n assignWithDepth(currentConfig, conf, { clobber: true });\n // Set theme variables if user has set the theme option\n assignWithDepth(siteConfig, conf);\n\n return getSiteConfig();\n};\n/**\n *## getSiteConfig\n *| Function | Description | Type | Values |\n *| --------- | ------------------- | ------- | ------------------ |\n *| setSiteConfig|Returns the current siteConfig base configuration | Get Request | Returns Any Values in siteConfig|\n ***Notes**:\n *Returns **any** values in siteConfig.\n * @returns {*}\n */\nexport const getSiteConfig = () => {\n return assignWithDepth({}, siteConfig);\n};\n/**\n *## setConfig\n *| Function | Description | Type | Values |\n *| --------- | ------------------- | ------- | ------------------ |\n *| setSiteConfig|Sets the siteConfig to desired values | Put Request| Any Values, except ones in secure array|\n ***Notes**:\n *Sets the currentConfig. The parameter conf is sanitized based on the siteConfig.secure keys. Any\n *values found in conf with key found in siteConfig.secure will be replaced with the corresponding\n *siteConfig value.\n * @param conf - the potential currentConfig\n * @returns {*} - the currentConfig merged with the sanitized conf\n */\nexport const setConfig = conf => {\n sanitize(conf);\n Object.keys(conf).forEach(key => {\n const manipulator = manipulators[key];\n conf[key] = manipulator ? manipulator(conf[key]) : conf[key];\n });\n\n assignWithDepth(currentConfig, conf);\n return getConfig();\n};\n/**\n * ## getConfig\n *| Function | Description | Type | Return Values |\n *| --------- | ------------------- | ------- | ------------------ |\n *| getConfig |Obtains the currentConfig | Get Request | Any Values from currentConfig|\n ***Notes**:\n *Returns **any** the currentConfig\n * @returns {*} - the currentConfig\n */\nexport const getConfig = () => {\n return assignWithDepth({}, currentConfig);\n};\n/**\n *## sanitize\n *| Function | Description | Type | Values |\n *| --------- | ------------------- | ------- | ------------------ |\n *| sanitize |Sets the siteConfig to desired values. | Put Request |None|\n *Ensures options parameter does not attempt to override siteConfig secure keys\n *Note: modifies options in-place\n * @param options - the potential setConfig parameter\n */\nexport const sanitize = options => {\n Object.keys(siteConfig.secure).forEach(key => {\n if (typeof options[siteConfig.secure[key]] !== 'undefined') {\n // DO NOT attempt to print options[siteConfig.secure[key]] within `${}` as a malicious script\n // can exploit the logger's attempt to stringify the value and execute arbitrary code\n logger.warn(\n `Denied attempt to modify a secure key ${siteConfig.secure[key]}`,\n options[siteConfig.secure[key]]\n );\n delete options[siteConfig.secure[key]];\n }\n });\n};\n/**\n *## reset\n *| Function | Description | Type | Required | Values |\n *| --------- | ------------------- | ------- | -------- | ------------------ |\n *| reset|Resets currentConfig to conf| Put Request | Required | None|\n *\n *| Parameter | Description |Type | Required | Values|\n *| --- | --- | --- | --- | --- |\n *| conf| base set of values, which currentConfig coul be **reset** to.| Dictionary | Required | Any Values, with respect to the secure Array|\n *\n **Notes :\n (default: current siteConfig ) (optional, default `getSiteConfig()`)\n * @param conf - the base currentConfig to reset to (default: current siteConfig )\n */\nexport const reset = (conf = getSiteConfig()) => {\n Object.keys(siteConfig).forEach(key => delete siteConfig[key]);\n Object.keys(currentConfig).forEach(key => delete currentConfig[key]);\n assignWithDepth(siteConfig, conf, { clobber: true });\n assignWithDepth(currentConfig, conf, { clobber: true });\n};\n\nconst configApi = Object.freeze({\n sanitize,\n setSiteConfig,\n getSiteConfig,\n setConfig,\n getConfig,\n reset,\n defaultConfig\n});\nexport default configApi;\n","import intersectRect from './intersect/intersect-rect';\nimport { logger as log } from '../logger'; // eslint-disable-line\nimport createLabel from './createLabel';\nimport { select } from 'd3';\nimport { getConfig } from '../config';\n\nconst rect = (parent, node) => {\n log.trace('Creating subgraph rect for ', node.id, node);\n\n // Add outer g element\n const shapeSvg = parent\n .insert('g')\n .attr('class', 'cluster')\n .attr('id', node.id);\n\n // add the rect\n const rect = shapeSvg.insert('rect', ':first-child');\n\n // Create the label and insert it after the rect\n const label = shapeSvg.insert('g').attr('class', 'cluster-label');\n\n const text = label\n .node()\n .appendChild(createLabel(node.labelText, node.labelStyle, undefined, true));\n\n // Get the size of the label\n let bbox = text.getBBox();\n\n if (getConfig().flowchart.htmlLabels) {\n const div = text.children[0];\n const dv = select(text);\n bbox = div.getBoundingClientRect();\n dv.attr('width', bbox.width);\n dv.attr('height', bbox.height);\n }\n\n const padding = 0 * node.padding;\n const halfPadding = padding / 2;\n\n log.trace('Data ', node, JSON.stringify(node));\n // center the rect around its coordinate\n rect\n .attr('rx', node.rx)\n .attr('ry', node.ry)\n .attr('x', node.x - node.width / 2 - halfPadding)\n .attr('y', node.y - node.height / 2 - halfPadding)\n .attr('width', node.width + padding)\n .attr('height', node.height + padding);\n\n // Center the label\n label.attr(\n 'transform',\n 'translate(' +\n (node.x - bbox.width / 2) +\n ', ' +\n (node.y - node.height / 2 - node.padding / 3 + 3) +\n ')'\n );\n\n const rectBox = rect.node().getBBox();\n node.width = rectBox.width;\n node.height = rectBox.height;\n\n node.intersect = function(point) {\n return intersectRect(node, point);\n };\n\n return shapeSvg;\n};\n\n/**\n * Non visiable cluster where the note is group with its\n */\nconst noteGroup = (parent, node) => {\n // Add outer g element\n const shapeSvg = parent\n .insert('g')\n .attr('class', 'note-cluster')\n .attr('id', node.id);\n\n // add the rect\n const rect = shapeSvg.insert('rect', ':first-child');\n\n const padding = 0 * node.padding;\n const halfPadding = padding / 2;\n\n // center the rect around its coordinate\n rect\n .attr('rx', node.rx)\n .attr('ry', node.ry)\n .attr('x', node.x - node.width / 2 - halfPadding)\n .attr('y', node.y - node.height / 2 - halfPadding)\n .attr('width', node.width + padding)\n .attr('height', node.height + padding)\n .attr('fill', 'none');\n\n const rectBox = rect.node().getBBox();\n node.width = rectBox.width;\n node.height = rectBox.height;\n\n node.intersect = function(point) {\n return intersectRect(node, point);\n };\n\n return shapeSvg;\n};\nconst roundedWithTitle = (parent, node) => {\n // Add outer g element\n const shapeSvg = parent\n .insert('g')\n .attr('class', node.classes)\n .attr('id', node.id);\n\n // add the rect\n const rect = shapeSvg.insert('rect', ':first-child');\n\n // Create the label and insert it after the rect\n const label = shapeSvg.insert('g').attr('class', 'cluster-label');\n const innerRect = shapeSvg.append('rect');\n\n const text = label\n .node()\n .appendChild(createLabel(node.labelText, node.labelStyle, undefined, true));\n\n // Get the size of the label\n let bbox = text.getBBox();\n if (getConfig().flowchart.htmlLabels) {\n const div = text.children[0];\n const dv = select(text);\n bbox = div.getBoundingClientRect();\n dv.attr('width', bbox.width);\n dv.attr('height', bbox.height);\n }\n bbox = text.getBBox();\n const padding = 0 * node.padding;\n const halfPadding = padding / 2;\n\n // center the rect around its coordinate\n rect\n .attr('class', 'outer')\n .attr('x', node.x - node.width / 2 - halfPadding)\n .attr('y', node.y - node.height / 2 - halfPadding)\n .attr('width', node.width + padding)\n .attr('height', node.height + padding);\n innerRect\n .attr('class', 'inner')\n .attr('x', node.x - node.width / 2 - halfPadding)\n .attr('y', node.y - node.height / 2 - halfPadding + bbox.height - 1)\n .attr('width', node.width + padding)\n .attr('height', node.height + padding - bbox.height - 3);\n\n // Center the label\n label.attr(\n 'transform',\n 'translate(' +\n (node.x - bbox.width / 2) +\n ', ' +\n (node.y - node.height / 2 - node.padding / 3 + (getConfig().flowchart.htmlLabels ? 5 : 3)) +\n ')'\n );\n\n const rectBox = rect.node().getBBox();\n node.width = rectBox.width;\n node.height = rectBox.height;\n\n node.intersect = function(point) {\n return intersectRect(node, point);\n };\n\n return shapeSvg;\n};\n\nconst divider = (parent, node) => {\n // Add outer g element\n const shapeSvg = parent\n .insert('g')\n .attr('class', node.classes)\n .attr('id', node.id);\n\n // add the rect\n const rect = shapeSvg.insert('rect', ':first-child');\n\n const padding = 0 * node.padding;\n const halfPadding = padding / 2;\n\n // center the rect around its coordinate\n rect\n .attr('class', 'divider')\n .attr('x', node.x - node.width / 2 - halfPadding)\n .attr('y', node.y - node.height / 2)\n .attr('width', node.width + padding)\n .attr('height', node.height + padding);\n\n const rectBox = rect.node().getBBox();\n node.width = rectBox.width;\n node.height = rectBox.height;\n\n node.intersect = function(point) {\n return intersectRect(node, point);\n };\n\n return shapeSvg;\n};\n\nconst shapes = { rect, roundedWithTitle, noteGroup, divider };\n\nlet clusterElems = {};\n\nexport const insertCluster = (elem, node) => {\n log.trace('Inserting cluster');\n const shape = node.shape || 'rect';\n clusterElems[node.id] = shapes[shape](elem, node);\n};\nexport const getClusterTitleWidth = (elem, node) => {\n const label = createLabel(node.labelText, node.labelStyle, undefined, true);\n elem.node().appendChild(label);\n const width = label.getBBox().width;\n elem.node().removeChild(label);\n return width;\n};\n\nexport const clear = () => {\n clusterElems = {};\n};\n\nexport const positionCluster = node => {\n log.info('Position cluster');\n const el = clusterElems[node.id];\n\n el.attr('transform', 'translate(' + node.x + ', ' + node.y + ')');\n};\n","import { select } from 'd3';\nimport { logger } from '../logger'; // eslint-disable-line\n// let vertexNode;\n// if (getConfig().flowchart.htmlLabels) {\n// // TODO: addHtmlLabel accepts a labelStyle. Do we possibly have that?\n// const node = {\n// label: vertexText.replace(/fa[lrsb]?:fa-[\\w-]+/g, s => ``)\n// };\n// vertexNode = addHtmlLabel(svg, node).node();\n// vertexNode.parentNode.removeChild(vertexNode);\n// } else {\n// const svgLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text');\n// svgLabel.setAttribute('style', styles.labelStyle.replace('color:', 'fill:'));\n\n// const rows = vertexText.split(common.lineBreakRegex);\n\n// for (let j = 0; j < rows.length; j++) {\n// const tspan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');\n// tspan.setAttributeNS('http://www.w3.org/XML/1998/namespace', 'xml:space', 'preserve');\n// tspan.setAttribute('dy', '1em');\n// tspan.setAttribute('x', '1');\n// tspan.textContent = rows[j];\n// svgLabel.appendChild(tspan);\n// }\n// vertexNode = svgLabel;\n// }\nimport { getConfig } from '../config';\n\nfunction applyStyle(dom, styleFn) {\n if (styleFn) {\n dom.attr('style', styleFn);\n }\n}\n\nfunction addHtmlLabel(node) {\n // var fo = root.append('foreignObject').attr('width', '100000');\n\n // var div = fo.append('xhtml:div');\n // div.attr('xmlns', 'http://www.w3.org/1999/xhtml');\n\n // var label = node.label;\n // switch (typeof label) {\n // case 'function':\n // div.insert(label);\n // break;\n // case 'object':\n // // Currently we assume this is a DOM object.\n // div.insert(function() {\n // return label;\n // });\n // break;\n // default:\n // div.html(label);\n // }\n\n // applyStyle(div, node.labelStyle);\n // div.style('display', 'inline-block');\n // // Fix for firefox\n // div.style('white-space', 'nowrap');\n\n // var client = div.node().getBoundingClientRect();\n // fo.attr('width', client.width).attr('height', client.height);\n const fo = select(document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject'));\n const div = fo.append('xhtml:div');\n\n const label = node.label;\n const labelClass = node.isNode ? 'nodeLabel' : 'edgeLabel';\n div.html('' + label + '');\n\n applyStyle(div, node.labelStyle);\n div.style('display', 'inline-block');\n // Fix for firefox\n div.style('white-space', 'nowrap');\n div.attr('xmlns', 'http://www.w3.org/1999/xhtml');\n return fo.node();\n}\n\nconst createLabel = (_vertexText, style, isTitle, isNode) => {\n let vertexText = _vertexText || '';\n if (getConfig().flowchart.htmlLabels) {\n // TODO: addHtmlLabel accepts a labelStyle. Do we possibly have that?\n vertexText = vertexText.replace(/\\\\n|\\n/g, '\n *\n * <script>\n * var config = {\n * theme:'default',\n * logLevel:'fatal',\n * securityLevel:'strict',\n * startOnLoad:true,\n * arrowMarkerAbsolute:false,\n *\n * er:{\n * diagramPadding:20,\n * layoutDirection:'TB',\n * minEntityWidth:100,\n * minEntityHeight:75,\n * entityPadding:15,\n * stroke:'gray',\n * fill:'honeydew',\n * fontSize:12,\n * useMaxWidth:true,\n * },\n * flowchart:{\n * diagramPadding:8,\n * htmlLabels:true,\n * curve:'linear',\n * },\n * sequence:{\n * diagramMarginX:50,\n * diagramMarginY:10,\n * actorMargin:50,\n * width:150,\n * height:65,\n * boxMargin:10,\n * boxTextMargin:5,\n * noteMargin:10,\n * messageMargin:35,\n * messageAlign:'center',\n * mirrorActors:true,\n * bottomMarginAdj:1,\n * useMaxWidth:true,\n * rightAngles:false,\n * showSequenceNumbers:false,\n * },\n * gantt:{\n * titleTopMargin:25,\n * barHeight:20,\n * barGap:4,\n * topPadding:50,\n * leftPadding:75,\n * gridLineStartPadding:35,\n * fontSize:11,\n * fontFamily:'\"Open-Sans\", \"sans-serif\"',\n * numberSectionStyles:4,\n * axisFormat:'%Y-%m-%d',\n * }\n * };\n * mermaid.initialize(config);\n * </script>\n *\n */\n","import classDiagram from './diagrams/class/styles';\nimport er from './diagrams/er/styles';\nimport flowchart from './diagrams/flowchart/styles';\nimport gantt from './diagrams/gantt/styles';\nimport git from './diagrams/git/styles';\nimport info from './diagrams/info/styles';\nimport pie from './diagrams/pie/styles';\nimport sequence from './diagrams/sequence/styles';\nimport stateDiagram from './diagrams/state/styles';\nimport journey from './diagrams/user-journey/styles';\n\nconst themes = {\n flowchart,\n 'flowchart-v2': flowchart,\n sequence,\n gantt,\n classDiagram,\n 'classDiagram-v2': classDiagram,\n class: classDiagram,\n stateDiagram,\n state: stateDiagram,\n git,\n info,\n pie,\n er,\n journey\n};\n\nexport const calcThemeVariables = (theme, userOverRides) => theme.calcColors(userOverRides);\n\nconst getStyles = (type, userStyles, options) => {\n return ` {\n font-family: ${options.fontFamily};\n font-size: ${options.fontSize};\n fill: ${options.textColor}\n }\n\n /* Classes common for multiple diagrams */\n\n .error-icon {\n fill: ${options.errorBkgColor};\n }\n .error-text {\n fill: ${options.errorTextColor};\n stroke: ${options.errorTextColor};\n }\n\n .edge-thickness-normal {\n stroke-width: 2px;\n }\n .edge-thickness-thick {\n stroke-width: 3.5px\n }\n .edge-pattern-solid {\n stroke-dasharray: 0;\n }\n\n .edge-pattern-dashed{\n stroke-dasharray: 3;\n }\n .edge-pattern-dotted {\n stroke-dasharray: 2;\n }\n\n .marker {\n fill: ${options.lineColor};\n }\n .marker.cross {\n stroke: ${options.lineColor};\n }\n\n svg {\n font-family: ${options.fontFamily};\n font-size: ${options.fontSize};\n }\n\n ${themes[type](options)}\n\n ${userStyles}\n\n ${type} { fill: apa;}\n`;\n};\n\nexport default getStyles;\n","import { getThemeVariables as baseThemeVariables } from './theme-base';\nimport { getThemeVariables as darkThemeVariables } from './theme-dark';\nimport { getThemeVariables as defaultThemeVariables } from './theme-default';\nimport { getThemeVariables as forestThemeVariables } from './theme-forest';\nimport { getThemeVariables as neutralThemeVariables } from './theme-neutral';\n\nexport default {\n base: {\n getThemeVariables: baseThemeVariables\n },\n dark: {\n getThemeVariables: darkThemeVariables\n },\n default: {\n getThemeVariables: defaultThemeVariables\n },\n forest: {\n getThemeVariables: forestThemeVariables\n },\n neutral: {\n getThemeVariables: neutralThemeVariables\n }\n};\n","import { darken, lighten, adjust } from 'khroma';\n\nclass Theme {\n constructor() {\n /* Base variables */\n this.primaryColor = '#9f33be';\n this.secondaryColor = '#b20238';\n this.tertiaryColor = lighten(this.primaryColor, 30);\n this.relationColor = '#000';\n\n // this.primaryColor = '#fa255e';\n // this.secondaryColor = '#c39ea0';\n // this.tertiaryColor = '#f8e5e5';\n\n // this.primaryColor = '#ECECFF';\n // this.secondaryColor = '#ffffde';\n // this.tertiaryColor = '#ffffde';\n\n this.background = 'white';\n this.lineColor = '#333333';\n this.border1 = '#9370DB';\n this.arrowheadColor = '#333333';\n this.fontFamily = '\"trebuchet ms\", verdana, arial';\n this.fontSize = '16px';\n this.labelBackground = '#e8e8e8';\n this.textColor = '#333';\n this.noteBkgColor = '#fff5ad';\n this.noteBorderColor = '#aaaa33';\n this.updateColors();\n }\n updateColors() {\n this.secondBkg = this.tertiaryColor;\n\n /* Flowchart variables */\n\n this.nodeBkg = this.primaryColor;\n this.mainBkg = this.primaryColor;\n this.nodeBorder = darken(this.primaryColor, 23); // border 1\n this.clusterBkg = this.tertiaryColor;\n this.clusterBorder = darken(this.tertiaryColor, 30);\n this.defaultLinkColor = this.lineColor;\n this.titleColor = this.textColor;\n this.edgeLabelBackground = this.labelBackground;\n\n /* Sequence Diagram variables */\n\n // this.actorBorder = lighten(this.border1, 0.5);\n this.actorBorder = lighten(this.border1, 23);\n this.actorBkg = this.mainBkg;\n this.actorTextColor = 'black';\n this.actorLineColor = 'grey';\n this.labelBoxBkgColor = this.actorBkg;\n this.signalColor = this.textColor;\n this.signalTextColor = this.textColor;\n this.labelBoxBorderColor = this.actorBorder;\n this.labelTextColor = this.actorTextColor;\n this.loopTextColor = this.actorTextColor;\n this.noteBorderColor = this.border2;\n this.noteTextColor = this.actorTextColor;\n this.activationBorderColor = darken(this.secondaryColor, 10);\n this.activationBkgColor = this.secondaryColor;\n this.sequenceNumberColor = 'white';\n\n /* Gantt chart variables */\n\n this.taskTextColor = this.taskTextLightColor;\n this.taskTextOutsideColor = this.taskTextDarkColor;\n this.sectionBkgColor = this.tertiaryColor;\n this.altSectionBkgColor = 'white';\n this.sectionBkgColor = this.secondaryColor;\n this.sectionBkgColor2 = this.tertiaryColor;\n this.altSectionBkgColor = 'white';\n this.sectionBkgColor2 = this.primaryColor;\n this.taskBorderColor = lighten(this.primaryColor, 23);\n this.taskBkgColor = this.primaryColor;\n this.taskTextLightColor = 'white';\n this.taskTextColor = 'calculated';\n this.taskTextDarkColor = 'black';\n this.taskTextOutsideColor = 'calculated';\n this.taskTextClickableColor = '#003163';\n this.activeTaskBorderColor = this.primaryColor;\n this.activeTaskBkgColor = lighten(this.primaryColor, 23);\n this.gridColor = 'lightgrey';\n this.doneTaskBkgColor = 'lightgrey';\n this.doneTaskBorderColor = 'grey';\n this.critBorderColor = '#ff8888';\n this.critBkgColor = 'red';\n this.todayLineColor = 'red';\n\n /* state colors */\n this.labelColor = 'black';\n this.errorBkgColor = '#552222';\n this.errorTextColor = '#552222';\n\n /* state colors */\n\n /* class */\n this.classText = this.textColor;\n\n /* user-journey */\n this.fillType0 = this.primaryColor;\n this.fillType1 = this.secondaryColor;\n this.fillType2 = adjust(this.primaryColor, { h: 64 });\n this.fillType3 = adjust(this.secondaryColor, { h: 64 });\n this.fillType4 = adjust(this.primaryColor, { h: -64 });\n this.fillType5 = adjust(this.secondaryColor, { h: -64 });\n this.fillType6 = adjust(this.primaryColor, { h: 128 });\n this.fillType7 = adjust(this.secondaryColor, { h: 128 });\n }\n calculate(overrides) {\n if (typeof overrides !== 'object') {\n // Calculate colors form base colors\n this.updateColors();\n return;\n }\n\n const keys = Object.keys(overrides);\n\n // Copy values from overrides, this is mainly for base colors\n keys.forEach(k => {\n this[k] = overrides[k];\n });\n\n // Calculate colors form base colors\n this.updateColors();\n // Copy values from overrides again in case of an override of derived value\n keys.forEach(k => {\n this[k] = overrides[k];\n });\n }\n}\n\nexport const getThemeVariables = userOverrides => {\n const theme = new Theme();\n theme.calculate(userOverrides);\n return theme;\n};\n","import { invert, lighten, darken, rgba, adjust } from 'khroma';\n\nclass Theme {\n constructor() {\n this.background = '#333';\n this.primaryColor = '#1f2020';\n this.secondaryColor = lighten(this.primaryColor, 16);\n this.mainBkg = '#1f2020';\n this.secondBkg = 'calculated';\n this.mainContrastColor = 'lightgrey';\n this.darkTextColor = lighten(invert('#323D47'), 10);\n this.lineColor = 'calculated';\n this.border1 = '#81B1DB';\n this.border2 = rgba(255, 255, 255, 0.25);\n this.arrowheadColor = 'calculated';\n this.fontFamily = '\"trebuchet ms\", verdana, arial';\n this.fontSize = '16px';\n this.labelBackground = '#181818';\n this.textColor = '#ccc';\n /* Flowchart variables */\n\n this.nodeBkg = 'calculated';\n this.nodeBorder = 'calculated';\n this.clusterBkg = 'calculated';\n this.clusterBorder = 'calculated';\n this.defaultLinkColor = 'calculated';\n this.titleColor = '#F9FFFE';\n this.edgeLabelBackground = 'calculated';\n\n /* Sequence Diagram variables */\n\n this.actorBorder = 'calculated';\n this.actorBkg = 'calculated';\n this.actorTextColor = 'calculated';\n this.actorLineColor = 'calculated';\n this.signalColor = 'calculated';\n this.signalTextColor = 'calculated';\n this.labelBoxBkgColor = 'calculated';\n this.labelBoxBorderColor = 'calculated';\n this.labelTextColor = 'calculated';\n this.loopTextColor = 'calculated';\n this.noteBorderColor = 'calculated';\n this.noteBkgColor = '#fff5ad';\n this.noteTextColor = 'calculated';\n this.activationBorderColor = 'calculated';\n this.activationBkgColor = 'calculated';\n this.sequenceNumberColor = 'black';\n\n /* Gantt chart variables */\n\n this.sectionBkgColor = darken('#EAE8D9', 30);\n this.altSectionBkgColor = 'calculated';\n this.sectionBkgColor2 = '#EAE8D9';\n this.taskBorderColor = rgba(255, 255, 255, 70);\n this.taskBkgColor = 'calculated';\n this.taskTextColor = 'calculated';\n this.taskTextLightColor = 'calculated';\n this.taskTextOutsideColor = 'calculated';\n this.taskTextClickableColor = '#003163';\n this.activeTaskBorderColor = rgba(255, 255, 255, 50);\n this.activeTaskBkgColor = '#81B1DB';\n this.gridColor = 'calculated';\n this.doneTaskBkgColor = 'calculated';\n this.doneTaskBorderColor = 'grey';\n this.critBorderColor = '#E83737';\n this.critBkgColor = '#E83737';\n this.taskTextDarkColor = 'calculated';\n this.todayLineColor = '#DB5757';\n\n /* state colors */\n this.labelColor = 'calculated';\n\n this.errorBkgColor = '#a44141';\n this.errorTextColor = '#ddd';\n }\n updateColors() {\n this.secondBkg = lighten(this.mainBkg, 16);\n this.lineColor = this.mainContrastColor;\n this.arrowheadColor = this.mainContrastColor;\n /* Flowchart variables */\n\n this.nodeBkg = this.mainBkg;\n this.nodeBorder = this.border1;\n this.clusterBkg = this.secondBkg;\n this.clusterBorder = this.border2;\n this.defaultLinkColor = this.lineColor;\n this.edgeLabelBackground = lighten(this.labelBackground, 25);\n\n /* Sequence Diagram variables */\n\n this.actorBorder = this.border1;\n this.actorBkg = this.mainBkg;\n this.actorTextColor = this.mainContrastColor;\n this.actorLineColor = this.mainContrastColor;\n this.signalColor = this.mainContrastColor;\n this.signalTextColor = this.mainContrastColor;\n this.labelBoxBkgColor = this.actorBkg;\n this.labelBoxBorderColor = this.actorBorder;\n this.labelTextColor = this.mainContrastColor;\n this.loopTextColor = this.mainContrastColor;\n this.noteBorderColor = this.border2;\n this.noteTextColor = this.mainBkg;\n this.activationBorderColor = this.border1;\n this.activationBkgColor = this.secondBkg;\n\n /* Gantt chart variables */\n\n this.altSectionBkgColor = this.background;\n this.taskBkgColor = lighten(this.mainBkg, 23);\n this.taskTextColor = this.darkTextColor;\n this.taskTextLightColor = this.mainContrastColor;\n this.taskTextOutsideColor = this.taskTextLightColor;\n this.gridColor = this.mainContrastColor;\n this.doneTaskBkgColor = this.mainContrastColor;\n this.taskTextDarkColor = this.darkTextColor;\n\n /* state colors */\n this.labelColor = this.textColor;\n this.altBackground = lighten(this.background, 20);\n\n this.fillType0 = this.primaryColor;\n this.fillType1 = this.secondaryColor;\n this.fillType2 = adjust(this.primaryColor, { h: 64 });\n this.fillType3 = adjust(this.secondaryColor, { h: 64 });\n this.fillType4 = adjust(this.primaryColor, { h: -64 });\n this.fillType5 = adjust(this.secondaryColor, { h: -64 });\n this.fillType6 = adjust(this.primaryColor, { h: 128 });\n this.fillType7 = adjust(this.secondaryColor, { h: 128 });\n /* class */\n this.classText = this.nodeBorder;\n }\n calculate(overrides) {\n if (typeof overrides !== 'object') {\n // Calculate colors form base colors\n this.updateColors();\n return;\n }\n\n const keys = Object.keys(overrides);\n\n // Copy values from overrides, this is mainly for base colors\n keys.forEach(k => {\n this[k] = overrides[k];\n });\n\n // Calculate colors form base colors\n this.updateColors();\n // Copy values from overrides again in case of an override of derived value\n keys.forEach(k => {\n this[k] = overrides[k];\n });\n }\n}\n\nexport const getThemeVariables = userOverrides => {\n const theme = new Theme();\n theme.calculate(userOverrides);\n console.info('Theme(dark)', { userOverrides, theme });\n return theme;\n};\n","import { lighten, rgba, adjust } from 'khroma';\n\nclass Theme {\n constructor() {\n /* Base variables */\n this.primaryColor = '#ECECFF';\n this.secondaryColor = '#ffffde';\n this.background = 'white';\n this.mainBkg = '#ECECFF';\n this.secondBkg = '#ffffde';\n this.lineColor = '#333333';\n this.border1 = '#9370DB';\n this.border2 = '#aaaa33';\n this.arrowheadColor = '#333333';\n this.fontFamily = '\"trebuchet ms\", verdana, arial';\n this.fontSize = '16px';\n this.labelBackground = '#e8e8e8';\n this.textColor = '#333';\n\n /* Flowchart variables */\n\n this.nodeBkg = 'calculated';\n this.nodeBorder = 'calculated';\n this.clusterBkg = 'calculated';\n this.clusterBorder = 'calculated';\n this.defaultLinkColor = 'calculated';\n this.titleColor = 'calculated';\n this.edgeLabelBackground = 'calculated';\n\n /* Sequence Diagram variables */\n\n this.actorBorder = 'calculated';\n this.actorBkg = 'calculated';\n this.actorTextColor = 'black';\n this.actorLineColor = 'grey';\n this.signalColor = 'calculated';\n this.signalTextColor = 'calculated';\n this.labelBoxBkgColor = 'calculated';\n this.labelBoxBorderColor = 'calculated';\n this.labelTextColor = 'calculated';\n this.loopTextColor = 'calculated';\n this.noteBorderColor = 'calculated';\n this.noteBkgColor = '#fff5ad';\n this.noteTextColor = 'calculated';\n this.activationBorderColor = '#666';\n this.activationBkgColor = '#f4f4f4';\n this.sequenceNumberColor = 'white';\n\n /* Gantt chart variables */\n\n this.sectionBkgColor = 'calculated';\n this.altSectionBkgColor = 'calculated';\n this.sectionBkgColor2 = 'calculated';\n this.taskBorderColor = 'calculated';\n this.taskBkgColor = 'calculated';\n this.taskTextLightColor = 'calculated';\n this.taskTextColor = this.taskTextLightColor;\n this.taskTextDarkColor = 'calculated';\n this.taskTextOutsideColor = this.taskTextDarkColor;\n this.taskTextClickableColor = 'calculated';\n this.activeTaskBorderColor = 'calculated';\n this.activeTaskBkgColor = 'calculated';\n this.gridColor = 'calculated';\n this.doneTaskBkgColor = 'calculated';\n this.doneTaskBorderColor = 'calculated';\n this.critBorderColor = 'calculated';\n this.critBkgColor = 'calculated';\n this.todayLineColor = 'calculated';\n\n this.sectionBkgColor = rgba(102, 102, 255, 0.49);\n this.altSectionBkgColor = 'white';\n this.sectionBkgColor2 = '#fff400';\n this.taskBorderColor = '#534fbc';\n this.taskBkgColor = '#8a90dd';\n this.taskTextLightColor = 'white';\n this.taskTextColor = 'calculated';\n this.taskTextDarkColor = 'black';\n this.taskTextOutsideColor = 'calculated';\n this.taskTextClickableColor = '#003163';\n this.activeTaskBorderColor = '#534fbc';\n this.activeTaskBkgColor = '#bfc7ff';\n this.gridColor = 'lightgrey';\n this.doneTaskBkgColor = 'lightgrey';\n this.doneTaskBorderColor = 'grey';\n this.critBorderColor = '#ff8888';\n this.critBkgColor = 'red';\n this.todayLineColor = 'red';\n\n /* state colors */\n this.labelColor = 'black';\n this.errorBkgColor = '#552222';\n this.errorTextColor = '#552222';\n this.updateColors();\n }\n updateColors() {\n /* Flowchart variables */\n\n this.nodeBkg = this.mainBkg;\n this.nodeBorder = this.border1; // border 1\n this.clusterBkg = this.secondBkg;\n this.clusterBorder = this.border2;\n this.defaultLinkColor = this.lineColor;\n this.titleColor = this.textColor;\n this.edgeLabelBackground = this.labelBackground;\n\n /* Sequence Diagram variables */\n\n // this.actorBorder = lighten(this.border1, 0.5);\n this.actorBorder = lighten(this.border1, 23);\n this.actorBkg = this.mainBkg;\n this.labelBoxBkgColor = this.actorBkg;\n this.signalColor = this.textColor;\n this.signalTextColor = this.textColor;\n this.labelBoxBorderColor = this.actorBorder;\n this.labelTextColor = this.actorTextColor;\n this.loopTextColor = this.actorTextColor;\n this.noteBorderColor = this.border2;\n this.noteTextColor = this.actorTextColor;\n\n /* Gantt chart variables */\n\n this.taskTextColor = this.taskTextLightColor;\n this.taskTextOutsideColor = this.taskTextDarkColor;\n\n /* state colors */\n /* class */\n this.classText = this.nodeBorder;\n /* journey */\n this.fillType0 = this.primaryColor;\n this.fillType1 = this.secondaryColor;\n this.fillType2 = adjust(this.primaryColor, { h: 64 });\n this.fillType3 = adjust(this.secondaryColor, { h: 64 });\n this.fillType4 = adjust(this.primaryColor, { h: -64 });\n this.fillType5 = adjust(this.secondaryColor, { h: -64 });\n this.fillType6 = adjust(this.primaryColor, { h: 128 });\n this.fillType7 = adjust(this.secondaryColor, { h: 128 });\n }\n calculate(overrides) {\n if (typeof overrides !== 'object') {\n // Calculate colors form base colors\n this.updateColors();\n return;\n }\n\n const keys = Object.keys(overrides);\n\n // Copy values from overrides, this is mainly for base colors\n keys.forEach(k => {\n this[k] = overrides[k];\n });\n\n // Calculate colors form base colors\n this.updateColors();\n // Copy values from overrides again in case of an override of derived value\n keys.forEach(k => {\n this[k] = overrides[k];\n });\n }\n}\n\nexport const getThemeVariables = userOverrides => {\n const theme = new Theme();\n theme.calculate(userOverrides);\n console.info('Theme(default)', { userOverrides, theme });\n return theme;\n};\n","import { darken, adjust } from 'khroma';\nclass Theme {\n constructor() {\n /* Base vales */\n this.primaryColor = '#cde498';\n this.secondaryColor = '#cdffb2';\n this.background = 'white';\n this.mainBkg = '#cde498';\n this.secondBkg = '#cdffb2';\n this.lineColor = 'green';\n this.border1 = '#13540c';\n this.border2 = '#6eaa49';\n this.arrowheadColor = 'green';\n this.fontFamily = '\"trebuchet ms\", verdana, arial';\n this.fontSize = '16px';\n\n /* Flowchart variables */\n\n this.nodeBkg = 'calculated';\n this.nodeBorder = 'calculated';\n this.clusterBkg = 'calculated';\n this.clusterBorder = 'calculated';\n this.defaultLinkColor = 'calculated';\n this.titleColor = '#333';\n this.edgeLabelBackground = '#e8e8e8';\n\n /* Sequence Diagram variables */\n\n this.actorBorder = 'calculated';\n this.actorBkg = 'calculated';\n this.actorTextColor = 'black';\n this.actorLineColor = 'grey';\n this.signalColor = '#333';\n this.signalTextColor = '#333';\n this.labelBoxBkgColor = 'calculated';\n this.labelBoxBorderColor = '#326932';\n this.labelTextColor = 'calculated';\n this.loopTextColor = 'calculated';\n this.noteBorderColor = 'calculated';\n this.noteBkgColor = '#fff5ad';\n this.noteTextColor = 'calculated';\n this.activationBorderColor = '#666';\n this.activationBkgColor = '#f4f4f4';\n this.sequenceNumberColor = 'white';\n\n /* Gantt chart variables */\n\n this.sectionBkgColor = '#6eaa49';\n this.altSectionBkgColor = 'white';\n this.sectionBkgColor2 = '#6eaa49';\n this.taskBorderColor = 'calculated';\n this.taskBkgColor = '#487e3a';\n this.taskTextLightColor = 'white';\n this.taskTextColor = 'calculated';\n this.taskTextDarkColor = 'black';\n this.taskTextOutsideColor = 'calculated';\n this.taskTextClickableColor = '#003163';\n this.activeTaskBorderColor = 'calculated';\n this.activeTaskBkgColor = 'calculated';\n this.gridColor = 'lightgrey';\n this.doneTaskBkgColor = 'lightgrey';\n this.doneTaskBorderColor = 'grey';\n this.critBorderColor = '#ff8888';\n this.critBkgColor = 'red';\n this.todayLineColor = 'red';\n\n /* state colors */\n this.labelColor = 'black';\n\n this.errorBkgColor = '#552222';\n this.errorTextColor = '#552222';\n }\n updateColors() {\n /* Flowchart variables */\n\n this.nodeBkg = this.mainBkg;\n this.nodeBorder = this.border1;\n this.clusterBkg = this.secondBkg;\n this.clusterBorder = this.border2;\n this.defaultLinkColor = this.lineColor;\n\n /* Sequence Diagram variables */\n\n this.actorBorder = darken(this.mainBkg, 20);\n this.actorBkg = this.mainBkg;\n this.labelBoxBkgColor = this.actorBkg;\n this.labelTextColor = this.actorTextColor;\n this.loopTextColor = this.actorTextColor;\n this.noteBorderColor = this.border2;\n this.noteTextColor = this.actorTextColor;\n\n /* Gantt chart variables */\n\n this.taskBorderColor = this.border1;\n this.taskTextColor = this.taskTextLightColor;\n this.taskTextOutsideColor = this.taskTextDarkColor;\n this.activeTaskBorderColor = this.taskBorderColor;\n this.activeTaskBkgColor = this.mainBkg;\n\n /* state colors */\n /* class */\n this.classText = this.nodeBorder;\n /* journey */\n this.fillType0 = this.primaryColor;\n this.fillType1 = this.secondaryColor;\n this.fillType2 = adjust(this.primaryColor, { h: 64 });\n this.fillType3 = adjust(this.secondaryColor, { h: 64 });\n this.fillType4 = adjust(this.primaryColor, { h: -64 });\n this.fillType5 = adjust(this.secondaryColor, { h: -64 });\n this.fillType6 = adjust(this.primaryColor, { h: 128 });\n this.fillType7 = adjust(this.secondaryColor, { h: 128 });\n }\n calculate(overrides) {\n if (typeof overrides !== 'object') {\n // Calculate colors form base colors\n this.updateColors();\n return;\n }\n\n const keys = Object.keys(overrides);\n\n // Copy values from overrides, this is mainly for base colors\n keys.forEach(k => {\n this[k] = overrides[k];\n });\n\n // Calculate colors form base colors\n this.updateColors();\n // Copy values from overrides again in case of an override of derived value\n keys.forEach(k => {\n this[k] = overrides[k];\n });\n }\n}\n\nexport const getThemeVariables = userOverrides => {\n const theme = new Theme();\n theme.calculate(userOverrides);\n console.info('Theme(forest)', { userOverrides, theme });\n return theme;\n};\n","import { darken, lighten, adjust } from 'khroma';\n\n// const Color = require ( 'khroma/dist/color' ).default\n// Color.format.hex.stringify(Color.parse('hsl(210, 66.6666666667%, 95%)')); // => \"#EAF2FB\"\n\nclass Theme {\n constructor() {\n this.primaryColor = '#eee';\n this.contrast = '#26a';\n this.secondaryColor = lighten(this.contrast, 55);\n this.background = 'white';\n this.mainBkg = '#eee';\n this.secondBkg = 'calculated';\n this.lineColor = '#666';\n this.border1 = '#999';\n this.border2 = 'calculated';\n this.note = '#ffa';\n this.text = '#333';\n this.critical = '#d42';\n this.done = '#bbb';\n this.arrowheadColor = '#333333';\n this.fontFamily = '\"trebuchet ms\", verdana, arial';\n this.fontSize = '16px';\n\n /* Flowchart variables */\n\n this.nodeBkg = 'calculated';\n this.nodeBorder = 'calculated';\n this.clusterBkg = 'calculated';\n this.clusterBorder = 'calculated';\n this.defaultLinkColor = 'calculated';\n this.titleColor = 'calculated';\n this.edgeLabelBackground = 'white';\n\n /* Sequence Diagram variables */\n\n this.actorBorder = 'calculated';\n this.actorBkg = 'calculated';\n this.actorTextColor = 'calculated';\n this.actorLineColor = 'calculated';\n this.signalColor = 'calculated';\n this.signalTextColor = 'calculated';\n this.labelBoxBkgColor = 'calculated';\n this.labelBoxBorderColor = 'calculated';\n this.labelTextColor = 'calculated';\n this.loopTextColor = 'calculated';\n this.noteBorderColor = 'calculated';\n this.noteBkgColor = 'calculated';\n this.noteTextColor = 'calculated';\n this.activationBorderColor = '#666';\n this.activationBkgColor = '#f4f4f4';\n this.sequenceNumberColor = 'white';\n\n /* Gantt chart variables */\n\n this.sectionBkgColor = 'calculated';\n this.altSectionBkgColor = 'white';\n this.sectionBkgColor2 = 'calculated';\n this.taskBorderColor = 'calculated';\n this.taskBkgColor = 'calculated';\n this.taskTextLightColor = 'white';\n this.taskTextColor = 'calculated';\n this.taskTextDarkColor = 'calculated';\n this.taskTextOutsideColor = 'calculated';\n this.taskTextClickableColor = '#003163';\n this.activeTaskBorderColor = 'calculated';\n this.activeTaskBkgColor = 'calculated';\n this.gridColor = 'calculated';\n this.doneTaskBkgColor = 'calculated';\n this.doneTaskBorderColor = 'calculated';\n this.critBkgColor = 'calculated';\n this.critBorderColor = 'calculated';\n this.todayLineColor = 'calculated';\n\n /* state colors */\n this.labelColor = 'black';\n\n this.errorBkgColor = '#552222';\n this.errorTextColor = '#552222';\n }\n updateColors() {\n this.secondBkg = lighten(this.contrast, 55);\n this.border2 = this.contrast;\n\n /* Flowchart variables */\n\n this.nodeBkg = this.mainBkg;\n this.nodeBorder = this.border1;\n this.clusterBkg = this.secondBkg;\n this.clusterBorder = this.border2;\n this.defaultLinkColor = this.lineColor;\n this.titleColor = this.text;\n\n /* Sequence Diagram variables */\n\n this.actorBorder = lighten(this.border1, 23);\n this.actorBkg = this.mainBkg;\n this.actorTextColor = this.text;\n this.actorLineColor = this.lineColor;\n this.signalColor = this.text;\n this.signalTextColor = this.text;\n this.labelBoxBkgColor = this.actorBkg;\n this.labelBoxBorderColor = this.actorBorder;\n this.labelTextColor = this.text;\n this.loopTextColor = this.text;\n this.noteBorderColor = darken(this.note, 60);\n this.noteBkgColor = this.note;\n this.noteTextColor = this.actorTextColor;\n\n /* Gantt chart variables */\n\n this.sectionBkgColor = lighten(this.contrast, 30);\n this.sectionBkgColor2 = lighten(this.contrast, 30);\n\n this.taskBorderColor = darken(this.contrast, 10);\n\n this.taskBkgColor = this.contrast;\n this.taskTextColor = this.taskTextLightColor;\n this.taskTextDarkColor = this.text;\n this.taskTextOutsideColor = this.taskTextDarkColor;\n this.activeTaskBorderColor = this.taskBorderColor;\n this.activeTaskBkgColor = this.mainBkg;\n this.gridColor = lighten(this.border1, 30);\n\n this.doneTaskBkgColor = this.done;\n this.doneTaskBorderColor = this.lineColor;\n this.critBkgColor = this.critical;\n this.critBorderColor = darken(this.critBkgColor, 10);\n\n this.todayLineColor = this.critBkgColor;\n\n /* state colors */\n /* class */\n this.classText = this.nodeBorder;\n /* journey */\n this.fillType0 = this.primaryColor;\n this.fillType1 = this.secondaryColor;\n this.fillType2 = adjust(this.primaryColor, { h: 64 });\n this.fillType3 = adjust(this.secondaryColor, { h: 64 });\n this.fillType4 = adjust(this.primaryColor, { h: -64 });\n this.fillType5 = adjust(this.secondaryColor, { h: -64 });\n this.fillType6 = adjust(this.primaryColor, { h: 128 });\n this.fillType7 = adjust(this.secondaryColor, { h: 128 });\n }\n calculate(overrides) {\n if (typeof overrides !== 'object') {\n // Calculate colors form base colors\n this.updateColors();\n return;\n }\n\n const keys = Object.keys(overrides);\n\n // Copy values from overrides, this is mainly for base colors\n keys.forEach(k => {\n this[k] = overrides[k];\n });\n\n // Calculate colors form base colors\n this.updateColors();\n // Copy values from overrides again in case of an override of derived value\n keys.forEach(k => {\n this[k] = overrides[k];\n });\n }\n}\n\nexport const getThemeVariables = userOverrides => {\n const theme = new Theme();\n theme.calculate(userOverrides);\n console.info('Theme(neutral)', { userOverrides, theme });\n return theme;\n};\n","import {\n curveBasis,\n curveBasisClosed,\n curveBasisOpen,\n curveLinear,\n curveLinearClosed,\n curveMonotoneX,\n curveMonotoneY,\n curveNatural,\n curveStep,\n curveStepAfter,\n curveStepBefore,\n select\n} from 'd3';\nimport { logger } from './logger';\nimport { sanitizeUrl } from '@braintree/sanitize-url';\nimport common from './diagrams/common/common';\n// import cryptoRandomString from 'crypto-random-string';\n\n// Effectively an enum of the supported curve types, accessible by name\nconst d3CurveTypes = {\n curveBasis: curveBasis,\n curveBasisClosed: curveBasisClosed,\n curveBasisOpen: curveBasisOpen,\n curveLinear: curveLinear,\n curveLinearClosed: curveLinearClosed,\n curveMonotoneX: curveMonotoneX,\n curveMonotoneY: curveMonotoneY,\n curveNatural: curveNatural,\n curveStep: curveStep,\n curveStepAfter: curveStepAfter,\n curveStepBefore: curveStepBefore\n};\nconst directive = /[%]{2}[{]\\s*(?:(?:(\\w+)\\s*:|(\\w+))\\s*(?:(?:(\\w+))|((?:(?![}][%]{2}).|\\r?\\n)*))?\\s*)(?:[}][%]{2})?/gi;\nconst directiveWithoutOpen = /\\s*(?:(?:(\\w+)(?=:):|(\\w+))\\s*(?:(?:(\\w+))|((?:(?![}][%]{2}).|\\r?\\n)*))?\\s*)(?:[}][%]{2})?/gi;\nconst anyComment = /\\s*%%.*\\n/gm;\n\n/**\n * @function detectInit\n * Detects the init config object from the text\n * ```mermaid\n * %%{init: {\"theme\": \"debug\", \"logLevel\": 1 }}%%\n * graph LR\n * a-->b\n * b-->c\n * c-->d\n * d-->e\n * e-->f\n * f-->g\n * g-->h\n * ```\n * or\n * ```mermaid\n * %%{initialize: {\"theme\": \"dark\", logLevel: \"debug\" }}%%\n * graph LR\n * a-->b\n * b-->c\n * c-->d\n * d-->e\n * e-->f\n * f-->g\n * g-->h\n * ```\n *\n * @param {string} text The text defining the graph\n * @returns {object} the json object representing the init passed to mermaid.initialize()\n */\nexport const detectInit = function(text) {\n let inits = detectDirective(text, /(?:init\\b)|(?:initialize\\b)/);\n let results = {};\n if (Array.isArray(inits)) {\n let args = inits.map(init => init.args);\n results = assignWithDepth(results, [...args]);\n } else {\n results = inits.args;\n }\n if (results) {\n let type = detectType(text);\n ['config'].forEach(prop => {\n if (typeof results[prop] !== 'undefined') {\n if (type === 'flowchart-v2') {\n type = 'flowchart';\n }\n results[type] = results[prop];\n delete results[prop];\n }\n });\n }\n return results;\n};\n\n/**\n * @function detectDirective\n * Detects the directive from the text. Text can be single line or multiline. If type is null or omitted\n * the first directive encountered in text will be returned\n * ```mermaid\n * graph LR\n * %%{somedirective}%%\n * a-->b\n * b-->c\n * c-->d\n * d-->e\n * e-->f\n * f-->g\n * g-->h\n * ```\n *\n * @param {string} text The text defining the graph\n * @param {string|RegExp} type The directive to return (default: null)\n * @returns {object | Array} An object or Array representing the directive(s): { type: string, args: object|null } matched by the input type\n * if a single directive was found, that directive object will be returned.\n */\nexport const detectDirective = function(text, type = null) {\n try {\n const commentWithoutDirectives = new RegExp(\n `[%]{2}(?![{]${directiveWithoutOpen.source})(?=[}][%]{2}).*\\n`,\n 'ig'\n );\n text = text\n .trim()\n .replace(commentWithoutDirectives, '')\n .replace(/'/gm, '\"');\n logger.debug(\n `Detecting diagram directive${type !== null ? ' type:' + type : ''} based on the text:${text}`\n );\n let match,\n result = [];\n while ((match = directive.exec(text)) !== null) {\n // This is necessary to avoid infinite loops with zero-width matches\n if (match.index === directive.lastIndex) {\n directive.lastIndex++;\n }\n if (\n (match && !type) ||\n (type && match[1] && match[1].match(type)) ||\n (type && match[2] && match[2].match(type))\n ) {\n let type = match[1] ? match[1] : match[2];\n let args = match[3] ? match[3].trim() : match[4] ? JSON.parse(match[4].trim()) : null;\n result.push({ type, args });\n }\n }\n if (result.length === 0) {\n result.push({ type: text, args: null });\n }\n\n return result.length === 1 ? result[0] : result;\n } catch (error) {\n logger.error(\n `ERROR: ${error.message} - Unable to parse directive${\n type !== null ? ' type:' + type : ''\n } based on the text:${text}`\n );\n return { type: null, args: null };\n }\n};\n\n/**\n * @function detectType\n * Detects the type of the graph text. Takes into consideration the possible existence of an %%init\n * directive\n * ```mermaid\n * %%{initialize: {\"startOnLoad\": true, logLevel: \"fatal\" }}%%\n * graph LR\n * a-->b\n * b-->c\n * c-->d\n * d-->e\n * e-->f\n * f-->g\n * g-->h\n * ```\n *\n * @param {string} text The text defining the graph\n * @returns {string} A graph definition key\n */\nexport const detectType = function(text) {\n text = text.replace(directive, '').replace(anyComment, '\\n');\n logger.debug('Detecting diagram type based on the text ' + text);\n if (text.match(/^\\s*sequenceDiagram/)) {\n return 'sequence';\n }\n\n if (text.match(/^\\s*gantt/)) {\n return 'gantt';\n }\n if (text.match(/^\\s*classDiagram-v2/)) {\n return 'classDiagram';\n }\n if (text.match(/^\\s*classDiagram/)) {\n return 'class';\n }\n\n if (text.match(/^\\s*stateDiagram-v2/)) {\n return 'stateDiagram';\n }\n\n if (text.match(/^\\s*stateDiagram/)) {\n return 'state';\n }\n\n if (text.match(/^\\s*gitGraph/)) {\n return 'git';\n }\n if (text.match(/^\\s*flowchart/)) {\n return 'flowchart-v2';\n }\n\n if (text.match(/^\\s*info/)) {\n return 'info';\n }\n if (text.match(/^\\s*pie/)) {\n return 'pie';\n }\n\n if (text.match(/^\\s*erDiagram/)) {\n return 'er';\n }\n\n if (text.match(/^\\s*journey/)) {\n return 'journey';\n }\n\n return 'flowchart';\n};\n\nconst memoize = (fn, resolver) => {\n let cache = {};\n return (...args) => {\n let n = resolver ? resolver.apply(this, args) : args[0];\n if (n in cache) {\n return cache[n];\n } else {\n let result = fn(...args);\n cache[n] = result;\n return result;\n }\n };\n};\n\n/**\n * @function isSubstringInArray\n * Detects whether a substring in present in a given array\n * @param {string} str The substring to detect\n * @param {array} arr The array to search\n * @returns {number} the array index containing the substring or -1 if not present\n **/\nexport const isSubstringInArray = function(str, arr) {\n for (let i = 0; i < arr.length; i++) {\n if (arr[i].match(str)) return i;\n }\n return -1;\n};\n\nexport const interpolateToCurve = (interpolate, defaultCurve) => {\n if (!interpolate) {\n return defaultCurve;\n }\n const curveName = `curve${interpolate.charAt(0).toUpperCase() + interpolate.slice(1)}`;\n return d3CurveTypes[curveName] || defaultCurve;\n};\n\nexport const formatUrl = (linkStr, config) => {\n let url = linkStr.trim();\n\n if (url) {\n if (config.securityLevel !== 'loose') {\n return sanitizeUrl(url);\n }\n\n return url;\n }\n};\n\nexport const runFunc = (functionName, ...params) => {\n const arrPaths = functionName.split('.');\n\n const len = arrPaths.length - 1;\n const fnName = arrPaths[len];\n\n let obj = window;\n for (let i = 0; i < len; i++) {\n obj = obj[arrPaths[i]];\n if (!obj) return;\n }\n\n obj[fnName](...params);\n};\n\nconst distance = (p1, p2) =>\n p1 && p2 ? Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2)) : 0;\n\nconst traverseEdge = points => {\n let prevPoint;\n let totalDistance = 0;\n\n points.forEach(point => {\n totalDistance += distance(point, prevPoint);\n prevPoint = point;\n });\n\n // Traverse half of total distance along points\n let remainingDistance = totalDistance / 2;\n let center = undefined;\n prevPoint = undefined;\n points.forEach(point => {\n if (prevPoint && !center) {\n const vectorDistance = distance(point, prevPoint);\n if (vectorDistance < remainingDistance) {\n remainingDistance -= vectorDistance;\n } else {\n // The point is remainingDistance from prevPoint in the vector between prevPoint and point\n // Calculate the coordinates\n const distanceRatio = remainingDistance / vectorDistance;\n if (distanceRatio <= 0) center = prevPoint;\n if (distanceRatio >= 1) center = { x: point.x, y: point.y };\n if (distanceRatio > 0 && distanceRatio < 1) {\n center = {\n x: (1 - distanceRatio) * prevPoint.x + distanceRatio * point.x,\n y: (1 - distanceRatio) * prevPoint.y + distanceRatio * point.y\n };\n }\n }\n }\n prevPoint = point;\n });\n return center;\n};\n\nconst calcLabelPosition = points => {\n return traverseEdge(points);\n};\n\nconst calcCardinalityPosition = (isRelationTypePresent, points, initialPosition) => {\n let prevPoint;\n let totalDistance = 0; // eslint-disable-line\n if (points[0] !== initialPosition) {\n points = points.reverse();\n }\n points.forEach(point => {\n totalDistance += distance(point, prevPoint);\n prevPoint = point;\n });\n\n // Traverse only 25 total distance along points to find cardinality point\n const distanceToCardinalityPoint = 25;\n\n let remainingDistance = distanceToCardinalityPoint;\n let center;\n prevPoint = undefined;\n points.forEach(point => {\n if (prevPoint && !center) {\n const vectorDistance = distance(point, prevPoint);\n if (vectorDistance < remainingDistance) {\n remainingDistance -= vectorDistance;\n } else {\n // The point is remainingDistance from prevPoint in the vector between prevPoint and point\n // Calculate the coordinates\n const distanceRatio = remainingDistance / vectorDistance;\n if (distanceRatio <= 0) center = prevPoint;\n if (distanceRatio >= 1) center = { x: point.x, y: point.y };\n if (distanceRatio > 0 && distanceRatio < 1) {\n center = {\n x: (1 - distanceRatio) * prevPoint.x + distanceRatio * point.x,\n y: (1 - distanceRatio) * prevPoint.y + distanceRatio * point.y\n };\n }\n }\n }\n prevPoint = point;\n });\n // if relation is present (Arrows will be added), change cardinality point off-set distance (d)\n let d = isRelationTypePresent ? 10 : 5;\n //Calculate Angle for x and y axis\n let angle = Math.atan2(points[0].y - center.y, points[0].x - center.x);\n let cardinalityPosition = { x: 0, y: 0 };\n //Calculation cardinality position using angle, center point on the line/curve but pendicular and with offset-distance\n cardinalityPosition.x = Math.sin(angle) * d + (points[0].x + center.x) / 2;\n cardinalityPosition.y = -Math.cos(angle) * d + (points[0].y + center.y) / 2;\n return cardinalityPosition;\n};\n\nexport const getStylesFromArray = arr => {\n let style = '';\n let labelStyle = '';\n\n for (let i = 0; i < arr.length; i++) {\n if (typeof arr[i] !== 'undefined') {\n // add text properties to label style definition\n if (arr[i].startsWith('color:') || arr[i].startsWith('text-align:')) {\n labelStyle = labelStyle + arr[i] + ';';\n } else {\n style = style + arr[i] + ';';\n }\n }\n }\n\n return { style: style, labelStyle: labelStyle };\n};\n\nlet cnt = 0;\nexport const generateId = () => {\n cnt++;\n return (\n 'id-' +\n Math.random()\n .toString(36)\n .substr(2, 12) +\n '-' +\n cnt\n );\n};\n\nfunction makeid(length) {\n var result = '';\n var characters = '0123456789abcdef';\n var charactersLength = characters.length;\n for (var i = 0; i < length; i++) {\n result += characters.charAt(Math.floor(Math.random() * charactersLength));\n }\n return result;\n}\n\nexport const random = options => {\n return makeid(options.length);\n};\n\n/**\n * @function assignWithDepth\n * Extends the functionality of {@link ObjectConstructor.assign} with the ability to merge arbitrary-depth objects\n * For each key in src with path `k` (recursively) performs an Object.assign(dst[`k`], src[`k`]) with\n * a slight change from the typical handling of undefined for dst[`k`]: instead of raising an error,\n * dst[`k`] is auto-initialized to {} and effectively merged with src[`k`]\n * \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\nexport default {\n assignWithDepth,\n wrapLabel,\n calculateTextHeight,\n calculateTextWidth,\n calculateTextDimensions,\n detectInit,\n detectDirective,\n detectType,\n isSubstringInArray,\n interpolateToCurve,\n calcLabelPosition,\n calcCardinalityPosition,\n formatUrl,\n getStylesFromArray,\n generateId,\n random,\n memoize,\n runFunc\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":""}