/gi, '
');\n\n mermaidAPI.render(\n id,\n txt,\n (svgCode, bindFunctions) => {\n element.innerHTML = svgCode;\n if (typeof callback !== 'undefined') {\n callback(id);\n }\n if (bindFunctions) bindFunctions(element);\n },\n element\n );\n }\n};\n\nconst initialize = function(config) {\n if (typeof config.mermaid !== 'undefined') {\n if (typeof config.mermaid.startOnLoad !== 'undefined') {\n mermaid.startOnLoad = config.mermaid.startOnLoad;\n }\n if (typeof config.mermaid.htmlLabels !== 'undefined') {\n mermaid.htmlLabels = config.mermaid.htmlLabels;\n }\n }\n mermaidAPI.initialize(config);\n logger.debug('Initializing mermaid ');\n};\n\n/**\n * ##contentLoaded\n * Callback function that is called when page is loaded. This functions fetches configuration for mermaid rendering and\n * calls init for rendering the mermaid diagrams on the page.\n */\nconst contentLoaded = function() {\n let config;\n\n if (mermaid.startOnLoad) {\n // No config found, do check API config\n config = mermaidAPI.getConfig();\n if (config.startOnLoad) {\n mermaid.init();\n }\n } else {\n if (typeof mermaid.startOnLoad === 'undefined') {\n logger.debug('In start, no config');\n config = mermaidAPI.getConfig();\n if (config.startOnLoad) {\n mermaid.init();\n }\n }\n }\n};\n\nif (typeof document !== 'undefined') {\n /*!\n * Wait for document loaded before starting the execution\n */\n window.addEventListener(\n 'load',\n function() {\n contentLoaded();\n },\n false\n );\n}\n\nconst mermaid = {\n startOnLoad: true,\n htmlLabels: true,\n\n mermaidAPI,\n parse: mermaidAPI.parse,\n render: mermaidAPI.render,\n\n init,\n initialize,\n\n contentLoaded\n};\n\nexport default mermaid;\n","/**\n * This is the api to be used when optionally handling the integration with the web page, instead of using the default integration provided by mermaid.js.\n *\n * The core of this api is the [**render**](https://github.com/knsv/mermaid/blob/master/docs/mermaidAPI.md#render) function which, given a graph\n * definition as text, renders the graph/diagram and returns an svg element for the graph.\n *\n * It is is then up to the user of the API to make use of the svg, either insert it somewhere in the page or do something completely different.\n *\n * In addition to the render function, a number of behavioral configuration options are available.\n *\n * @name mermaidAPI\n */\nimport { select } from 'd3';\nimport scope from 'scope-css';\nimport pkg from '../package.json';\nimport { setConfig, getConfig } from './config';\nimport { logger, setLogLevel } from './logger';\nimport utils from './utils';\nimport flowRenderer from './diagrams/flowchart/flowRenderer';\nimport flowRendererV2 from './diagrams/flowchart/flowRenderer-v2';\nimport flowParser from './diagrams/flowchart/parser/flow';\nimport flowDb from './diagrams/flowchart/flowDb';\nimport sequenceRenderer from './diagrams/sequence/sequenceRenderer';\nimport sequenceParser from './diagrams/sequence/parser/sequenceDiagram';\nimport sequenceDb from './diagrams/sequence/sequenceDb';\nimport ganttRenderer from './diagrams/gantt/ganttRenderer';\nimport ganttParser from './diagrams/gantt/parser/gantt';\nimport ganttDb from './diagrams/gantt/ganttDb';\nimport classRenderer from './diagrams/class/classRenderer';\nimport classParser from './diagrams/class/parser/classDiagram';\nimport classDb from './diagrams/class/classDb';\nimport stateRenderer from './diagrams/state/stateRenderer';\nimport stateRendererV2 from './diagrams/state/stateRenderer-v2';\nimport stateParser from './diagrams/state/parser/stateDiagram';\nimport stateDb from './diagrams/state/stateDb';\nimport gitGraphRenderer from './diagrams/git/gitGraphRenderer';\nimport gitGraphParser from './diagrams/git/parser/gitGraph';\nimport gitGraphAst from './diagrams/git/gitGraphAst';\nimport infoRenderer from './diagrams/info/infoRenderer';\nimport infoParser from './diagrams/info/parser/info';\nimport infoDb from './diagrams/info/infoDb';\nimport pieRenderer from './diagrams/pie/pieRenderer';\nimport pieParser from './diagrams/pie/parser/pie';\nimport pieDb from './diagrams/pie/pieDb';\nimport erDb from './diagrams/er/erDb';\nimport erParser from './diagrams/er/parser/erDiagram';\nimport erRenderer from './diagrams/er/erRenderer';\nimport journeyParser from './diagrams/user-journey/parser/journey';\nimport journeyDb from './diagrams/user-journey/journeyDb';\nimport journeyRenderer from './diagrams/user-journey/journeyRenderer';\n\nconst themes = {};\nfor (const themeName of ['default', 'forest', 'dark', 'neutral']) {\n themes[themeName] = require(`./themes/${themeName}/index.scss`);\n}\n\n/**\n * These are the default options which can be overridden with the initialization call like so:\n * **Example 1:**\n * \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](https://github.com/knsv/mermaid/blob/master/docs/mermaidAPI.md#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** - Choose one of the built-in themes:\n * * default\n * * forest\n * * dark\n * * neutral.\n * To disable any pre-defined mermaid theme, use \"null\".\n *\n * **themeCSS** - Use your own CSS. This overrides **theme**.\n * \n * \"theme\": \"forest\",\n * \"themeCSS\": \".node rect { fill: red; }\"\n * \n */\n theme: 'default',\n themeCSS: undefined,\n /* **maxTextSize** - The maximum allowed size of the users text diamgram */\n maxTextSize: 50000,\n\n /**\n * **fontFamily** The font to be used for the rendered diagrams. Default value is \\\"trebuchet ms\\\", verdana, arial;\n */\n fontFamily: '\"trebuchet ms\", verdana, arial;',\n\n /**\n * This option decides the amount of logging to be used.\n * * debug: 1\n * * info: 2\n * * warn: 3\n * * error: 4\n * * fatal: (**default**) 5\n */\n logLevel: 5,\n\n /**\n * Sets the level of trust to be used on the parsed diagrams.\n * * **strict**: (**default**) tags in text are encoded, click functionality is disabeled\n * * **loose**: tags in text are allowed, click functionality is enabled\n */\n securityLevel: 'strict',\n\n /**\n * This options controls whether or mermaid starts when the page loads\n * **Default value true**.\n */\n startOnLoad: true,\n\n /**\n * This options controls whether or arrow markers in html code will be absolute paths or\n * an anchor, #. This matters if you are using base tag settings.\n * **Default value false**.\n */\n arrowMarkerAbsolute: false,\n\n /**\n * The object containing configurations specific for flowcharts\n */\n flowchart: {\n /**\n * Flag for setting whether or not a html tag should be used for rendering labels\n * on the edges.\n * **Default value true**.\n */\n htmlLabels: true,\n\n /**\n * Defines the spacing between nodes on the same level (meaning horizontal spacing for\n * TB or BT graphs, and the vertical spacing for LR as well as RL graphs).\n * **Default value 50**.\n */\n nodeSpacing: 50,\n\n /**\n * Defines the spacing between nodes on different levels (meaning vertical spacing for\n * TB or BT graphs, and the horizontal spacing for LR as well as RL graphs).\n * **Default value 50**.\n */\n rankSpacing: 50,\n\n /**\n * How mermaid renders curves for flowcharts. Possible values are\n * * basis\n * * linear **default**\n * * cardinal\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 * margin to the right and left of the sequence diagram.\n * **Default value 50**.\n */\n diagramMarginX: 50,\n\n /**\n * margin to the over and under the sequence diagram.\n * **Default value 10**.\n */\n diagramMarginY: 10,\n\n /**\n * Margin between actors.\n * **Default value 50**.\n */\n actorMargin: 50,\n\n /**\n * Width of actor boxes\n * **Default value 150**.\n */\n width: 150,\n\n /**\n * Height of actor boxes\n * **Default value 65**.\n */\n height: 65,\n\n /**\n * Margin around loop boxes\n * **Default value 10**.\n */\n boxMargin: 10,\n\n /**\n * margin around the text in loop/alt/opt boxes\n * **Default value 5**.\n */\n boxTextMargin: 5,\n\n /**\n * margin around notes.\n * **Default value 10**.\n */\n noteMargin: 10,\n\n /**\n * Space between messages.\n * **Default value 35**.\n */\n messageMargin: 35,\n\n /**\n * Multiline message alignment. Possible values are:\n * * left\n * * center **default**\n * * right\n */\n messageAlign: 'center',\n\n /**\n * mirror actors under diagram.\n * **Default value true**.\n */\n mirrorActors: true,\n\n /**\n * Depending on css styling this might need adjustment.\n * Prolongs the edge of the diagram downwards.\n * **Default value 1**.\n */\n bottomMarginAdj: 1,\n\n /**\n * when this flag is set the height and width is set to 100% and is then scaling with the\n * available space if not the absolute space required is used.\n * **Default value true**.\n */\n useMaxWidth: true,\n\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 * This will show the node numbers\n * **Default value false**.\n */\n showSequenceNumbers: false,\n /**\n * This sets the font size of the actor's description\n * **Default value 14**.\n */\n actorFontSize: 14,\n /**\n * This sets the font family of the actor's description\n * **Default value \"Open-Sans\", \"sans-serif\"**.\n */\n actorFontFamily: '\"Open-Sans\", \"sans-serif\"',\n /**\n * This sets the font size of actor-attached notes.\n * **Default value 14**.\n */\n noteFontSize: 14,\n /**\n * This sets the font family of actor-attached notes.\n * **Default value \"trebuchet ms\", verdana, arial**.\n */\n noteFontFamily: '\"trebuchet ms\", verdana, arial',\n /**\n * This sets the text alignment of actor-attached notes.\n * **Default value center**.\n */\n noteAlign: 'center',\n /**\n * This sets the font size of actor messages.\n * **Default value 16**.\n */\n messageFontSize: 16,\n /**\n * This sets the font family of actor messages.\n * **Default value \"trebuchet ms\", verdana, arial**.\n */\n messageFontFamily: '\"trebuchet ms\", verdana, arial'\n },\n\n /**\n * The object containing configurations specific for gantt diagrams*\n */\n gantt: {\n /**\n * Margin top for the text over the gantt diagram\n * **Default value 25**.\n */\n titleTopMargin: 25,\n\n /**\n * The height of the bars in the graph\n * **Default value 20**.\n */\n barHeight: 20,\n\n /**\n * The margin between the different activities in the gantt diagram.\n * **Default value 4**.\n */\n barGap: 4,\n\n /**\n * Margin between title and gantt diagram and between axis and gantt diagram.\n * **Default value 50**.\n */\n topPadding: 50,\n\n /**\n * The space allocated for the section name to the left of the activities.\n * **Default value 75**.\n */\n leftPadding: 75,\n\n /**\n * Vertical starting position of the grid lines.\n * **Default value 35**.\n */\n gridLineStartPadding: 35,\n\n /**\n * Font size ...\n * **Default value 11**.\n */\n fontSize: 11,\n\n /**\n * font family ...\n * **Default value '\"Open-Sans\", \"sans-serif\"'**.\n */\n fontFamily: '\"Open-Sans\", \"sans-serif\"',\n\n /**\n * The number of alternating section styles.\n * **Default value 4**.\n */\n numberSectionStyles: 4,\n\n /**\n * Datetime format of the axis. 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 * margin to the right and left of the sequence diagram.\n * **Default value 50**.\n */\n diagramMarginX: 50,\n\n /**\n * margin to the over and under the sequence diagram.\n * **Default value 10**.\n */\n diagramMarginY: 10,\n\n /**\n * Margin between actors.\n * **Default value 50**.\n */\n actorMargin: 50,\n\n /**\n * Width of actor boxes\n * **Default value 150**.\n */\n width: 150,\n\n /**\n * Height of actor boxes\n * **Default value 65**.\n */\n height: 65,\n\n /**\n * Margin around loop boxes\n * **Default value 10**.\n */\n boxMargin: 10,\n\n /**\n * margin around the text in loop/alt/opt boxes\n * **Default value 5**.\n */\n boxTextMargin: 5,\n\n /**\n * margin around notes.\n * **Default value 10**.\n */\n noteMargin: 10,\n\n /**\n * Space between messages.\n * **Default value 35**.\n */\n messageMargin: 35,\n\n /**\n * Multiline message alignment. Possible values are:\n * * left\n * * center **default**\n * * right\n */\n messageAlign: 'center',\n\n /**\n * Depending on css styling this might need adjustment.\n * Prolongs the edge of the diagram downwards.\n * **Default value 1**.\n */\n bottomMarginAdj: 1,\n\n /**\n * when this flag is set the height and width is set to 100% and is then scaling with the\n * available space if not the absolute space required is used.\n * **Default value true**.\n */\n useMaxWidth: true,\n\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 class: {},\n git: {},\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 * The amount of padding around the diagram as a whole so that embedded diagrams have margins, expressed in pixels\n */\n diagramPadding: 20,\n\n /**\n * Directional bias for layout of entities. Can be either 'TB', 'BT', 'LR', or 'RL',\n * where T = top, B = bottom, L = left, and R = right.\n */\n layoutDirection: 'TB',\n\n /**\n * The mimimum width of an entity box, expressed in pixels\n */\n minEntityWidth: 100,\n\n /**\n * The minimum height of an entity box, expressed in pixels\n */\n minEntityHeight: 75,\n\n /**\n * The minimum internal padding between the text in an entity box and the enclosing box borders, expressed in pixels\n */\n entityPadding: 15,\n\n /**\n * Stroke color of box edges and lines\n */\n stroke: 'gray',\n\n /**\n * Fill color of entity boxes\n */\n fill: 'honeydew',\n\n /**\n * Font size (expressed as an integer representing a number of pixels)\n */\n fontSize: 12\n }\n};\n\nsetLogLevel(config.logLevel);\nsetConfig(config);\n\nfunction parse(text) {\n const graphType = utils.detectType(text);\n let parser;\n\n logger.debug('Type ' + graphType);\n switch (graphType) {\n case 'git':\n parser = gitGraphParser;\n parser.parser.yy = gitGraphAst;\n break;\n case 'flowchart':\n flowDb.clear();\n parser = flowParser;\n parser.parser.yy = flowDb;\n break;\n case 'flowchart-v2':\n flowDb.clear();\n parser = flowParser;\n parser.parser.yy = flowDb;\n break;\n case 'sequence':\n parser = sequenceParser;\n parser.parser.yy = sequenceDb;\n break;\n case 'gantt':\n parser = ganttParser;\n parser.parser.yy = ganttDb;\n break;\n case 'class':\n parser = classParser;\n parser.parser.yy = classDb;\n break;\n case 'state':\n parser = stateParser;\n parser.parser.yy = stateDb;\n break;\n case 'stateDiagram':\n parser = stateParser;\n parser.parser.yy = stateDb;\n break;\n case 'info':\n logger.debug('info info info');\n parser = infoParser;\n parser.parser.yy = infoDb;\n break;\n case 'pie':\n logger.debug('pie');\n parser = pieParser;\n parser.parser.yy = pieDb;\n break;\n case 'er':\n logger.debug('er');\n parser = erParser;\n parser.parser.yy = erDb;\n break;\n case 'journey':\n logger.debug('Journey');\n parser = journeyParser;\n parser.parser.yy = journeyDb;\n break;\n }\n\n parser.parser.yy.parseError = (str, hash) => {\n const error = { str, hash };\n throw error;\n };\n\n parser.parse(text);\n}\n\nexport const encodeEntities = function(text) {\n let txt = text;\n\n txt = txt.replace(/style.*:\\S*#.*;/g, function(s) {\n const innerTxt = s.substring(0, s.length - 1);\n return innerTxt;\n });\n txt = txt.replace(/classDef.*:\\S*#.*;/g, function(s) {\n const innerTxt = s.substring(0, s.length - 1);\n return innerTxt;\n });\n\n txt = txt.replace(/#\\w+;/g, function(s) {\n const innerTxt = s.substring(1, s.length - 1);\n\n const isInt = /^\\+?\\d+$/.test(innerTxt);\n if (isInt) {\n return 'fl°°' + innerTxt + '¶ß';\n } else {\n return 'fl°' + innerTxt + '¶ß';\n }\n });\n\n return txt;\n};\n\nexport const decodeEntities = function(text) {\n let txt = text;\n\n txt = txt.replace(/fl°°/g, function() {\n return '&#';\n });\n txt = txt.replace(/fl°/g, function() {\n return '&';\n });\n txt = txt.replace(/¶ß/g, function() {\n return ';';\n });\n\n return txt;\n};\n/**\n * Function that renders an svg with a graph from a chart definition. Usage example below.\n *\n * ```js\n * mermaidAPI.initialize({\n * startOnLoad:true\n * });\n * $(function(){\n * const graphDefinition = 'graph TB\\na-->b';\n * const cb = function(svgGraph){\n * console.log(svgGraph);\n * };\n * mermaidAPI.render('id1',graphDefinition,cb);\n * });\n *```\n * @param id the id of the element to be rendered\n * @param txt the graph definition\n * @param cb callback which is called after rendering is finished with the svg code as inparam.\n * @param container selector to element in which a div with the graph temporarily will be inserted. In one is\n * provided a hidden div will be inserted in the body of the page instead. The element will be removed when rendering is\n * completed.\n */\nconst render = function(id, _txt, cb, container) {\n // Check the maximum allowed text size\n let txt = _txt;\n if (_txt.length > config.maxTextSize) {\n txt = 'graph TB;a[Maximum text size in diagram exceeded];style a fill:#faa';\n }\n\n if (typeof container !== 'undefined') {\n container.innerHTML = '';\n\n select(container)\n .append('div')\n .attr('id', 'd' + id)\n .attr('style', 'font-family: ' + config.fontFamily)\n .append('svg')\n .attr('id', id)\n .attr('width', '100%')\n .attr('xmlns', 'http://www.w3.org/2000/svg')\n .append('g');\n } else {\n const existingSvg = document.getElementById(id);\n if (existingSvg) {\n existingSvg.remove();\n }\n const element = document.querySelector('#' + 'd' + id);\n if (element) {\n element.innerHTML = '';\n }\n\n select('body')\n .append('div')\n .attr('id', 'd' + id)\n .append('svg')\n .attr('id', id)\n .attr('width', '100%')\n .attr('xmlns', 'http://www.w3.org/2000/svg')\n .append('g');\n }\n\n window.txt = txt;\n txt = encodeEntities(txt);\n\n const element = select('#d' + id).node();\n const graphType = utils.detectType(txt);\n\n // insert inline style into svg\n const svg = element.firstChild;\n const firstChild = svg.firstChild;\n\n // pre-defined theme\n let style = themes[config.theme];\n if (style === undefined) {\n style = '';\n }\n\n // user provided theme CSS\n if (config.themeCSS !== undefined) {\n style += `\\n${config.themeCSS}`;\n }\n // user provided theme CSS\n if (config.fontFamily !== undefined) {\n style += `\\n:root { --mermaid-font-family: ${config.fontFamily}}`;\n }\n // user provided theme CSS\n if (config.altFontFamily !== undefined) {\n style += `\\n:root { --mermaid-alt-font-family: ${config.altFontFamily}}`;\n }\n\n // classDef\n if (graphType === 'flowchart' || graphType === 'flowchart-v2') {\n const classes = flowRenderer.getClasses(txt);\n for (const className in classes) {\n style += `\\n.${className} > * { ${classes[className].styles.join(\n ' !important; '\n )} !important; }`;\n if (classes[className].textStyles) {\n style += `\\n.${className} tspan { ${classes[className].textStyles.join(\n ' !important; '\n )} !important; }`;\n }\n }\n }\n\n const style1 = document.createElement('style');\n style1.innerHTML = scope(style, `#${id}`);\n svg.insertBefore(style1, firstChild);\n\n const style2 = document.createElement('style');\n const cs = window.getComputedStyle(svg);\n style2.innerHTML = `#${id} {\n color: ${cs.color};\n font: ${cs.font};\n }`;\n svg.insertBefore(style2, firstChild);\n\n switch (graphType) {\n case 'git':\n config.flowchart.arrowMarkerAbsolute = config.arrowMarkerAbsolute;\n gitGraphRenderer.setConf(config.git);\n gitGraphRenderer.draw(txt, id, false);\n break;\n case 'flowchart':\n config.flowchart.arrowMarkerAbsolute = config.arrowMarkerAbsolute;\n flowRenderer.setConf(config.flowchart);\n flowRenderer.draw(txt, id, false);\n break;\n case 'flowchart-v2':\n config.flowchart.arrowMarkerAbsolute = config.arrowMarkerAbsolute;\n flowRendererV2.setConf(config.flowchart);\n flowRendererV2.draw(txt, id, false);\n break;\n case 'sequence':\n config.sequence.arrowMarkerAbsolute = config.arrowMarkerAbsolute;\n if (config.sequenceDiagram) {\n // backwards compatibility\n sequenceRenderer.setConf(Object.assign(config.sequence, config.sequenceDiagram));\n console.error(\n '`mermaid config.sequenceDiagram` has been renamed to `config.sequence`. Please update your mermaid config.'\n );\n } else {\n sequenceRenderer.setConf(config.sequence);\n }\n sequenceRenderer.draw(txt, id);\n break;\n case 'gantt':\n config.gantt.arrowMarkerAbsolute = config.arrowMarkerAbsolute;\n ganttRenderer.setConf(config.gantt);\n ganttRenderer.draw(txt, id);\n break;\n case 'class':\n config.class.arrowMarkerAbsolute = config.arrowMarkerAbsolute;\n classRenderer.setConf(config.class);\n classRenderer.draw(txt, id);\n break;\n case 'state':\n // config.class.arrowMarkerAbsolute = config.arrowMarkerAbsolute;\n stateRenderer.setConf(config.state);\n stateRenderer.draw(txt, id);\n break;\n case 'stateDiagram':\n // config.class.arrowMarkerAbsolute = config.arrowMarkerAbsolute;\n stateRendererV2.setConf(config.state);\n stateRendererV2.draw(txt, id);\n break;\n case 'info':\n config.class.arrowMarkerAbsolute = config.arrowMarkerAbsolute;\n infoRenderer.setConf(config.class);\n infoRenderer.draw(txt, id, pkg.version);\n break;\n case 'pie':\n config.class.arrowMarkerAbsolute = config.arrowMarkerAbsolute;\n pieRenderer.setConf(config.class);\n pieRenderer.draw(txt, id, pkg.version);\n break;\n case 'er':\n erRenderer.setConf(config.er);\n erRenderer.draw(txt, id, pkg.version);\n break;\n case 'journey':\n journeyRenderer.setConf(config.journey);\n journeyRenderer.draw(txt, id, pkg.version);\n break;\n }\n\n select(`[id=\"${id}\"]`)\n .selectAll('foreignobject > *')\n .attr('xmlns', 'http://www.w3.org/1999/xhtml');\n\n // if (config.arrowMarkerAbsolute) {\n // url =\n // window.location.protocol +\n // '//' +\n // window.location.host +\n // window.location.pathname +\n // window.location.search;\n // url = url.replace(/\\(/g, '\\\\(');\n // url = url.replace(/\\)/g, '\\\\)');\n // }\n\n // Fix for when the base tag is used\n let svgCode = select('#d' + id).node().innerHTML;\n\n if (!config.arrowMarkerAbsolute || config.arrowMarkerAbsolute === 'false') {\n svgCode = svgCode.replace(/marker-end=\"url\\(.*?#/g, 'marker-end=\"url(#', 'g');\n }\n\n svgCode = decodeEntities(svgCode);\n\n if (typeof cb !== 'undefined') {\n switch (graphType) {\n case 'flowchart':\n case 'flowchart-v2':\n cb(svgCode, flowDb.bindFunctions);\n break;\n case 'gantt':\n cb(svgCode, ganttDb.bindFunctions);\n break;\n case 'class':\n cb(svgCode, classDb.bindFunctions);\n break;\n default:\n cb(svgCode);\n }\n } else {\n logger.debug('CB = undefined!');\n }\n\n const node = select('#d' + id).node();\n if (node !== null && typeof node.remove === 'function') {\n select('#d' + id)\n .node()\n .remove();\n }\n\n return svgCode;\n};\n\nconst setConf = function(cnf) {\n // Top level initially mermaid, gflow, sequenceDiagram and gantt\n const lvl1Keys = Object.keys(cnf);\n for (let i = 0; i < lvl1Keys.length; i++) {\n if (typeof cnf[lvl1Keys[i]] === 'object' && cnf[lvl1Keys[i]] != null) {\n const lvl2Keys = Object.keys(cnf[lvl1Keys[i]]);\n\n for (let j = 0; j < lvl2Keys.length; j++) {\n logger.debug('Setting conf ', lvl1Keys[i], '-', lvl2Keys[j]);\n if (typeof config[lvl1Keys[i]] === 'undefined') {\n config[lvl1Keys[i]] = {};\n }\n logger.debug(\n 'Setting config: ' +\n lvl1Keys[i] +\n ' ' +\n lvl2Keys[j] +\n ' to ' +\n cnf[lvl1Keys[i]][lvl2Keys[j]]\n );\n config[lvl1Keys[i]][lvl2Keys[j]] = cnf[lvl1Keys[i]][lvl2Keys[j]];\n }\n } else {\n config[lvl1Keys[i]] = cnf[lvl1Keys[i]];\n }\n }\n};\n\nfunction initialize(options) {\n logger.debug('Initializing mermaidAPI ', pkg.version);\n\n // Update default config with options supplied at initialization\n if (typeof options === 'object') {\n setConf(options);\n }\n setConfig(config);\n setLogLevel(config.logLevel);\n}\n\n// function getConfig () {\n// console.warn('get config')\n// return config\n// }\n\nconst mermaidAPI = {\n render,\n parse,\n initialize,\n getConfig\n};\n\nexport default mermaidAPI;\n/**\n * ## mermaidAPI configuration defaults\n * \n *\n * <script>\n * var config = {\n * theme:'default',\n * logLevel:'fatal',\n * securityLevel:'strict',\n * startOnLoad:true,\n * arrowMarkerAbsolute:false,\n *\n * flowchart:{\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","var map = {\n\t\"./dark/index.scss\": \"./src/themes/dark/index.scss\",\n\t\"./default/index.scss\": \"./src/themes/default/index.scss\",\n\t\"./forest/index.scss\": \"./src/themes/forest/index.scss\",\n\t\"./neutral/index.scss\": \"./src/themes/neutral/index.scss\"\n};\n\n\nfunction webpackContext(req) {\n\tvar id = webpackContextResolve(req);\n\treturn __webpack_require__(id);\n}\nfunction webpackContextResolve(req) {\n\tif(!__webpack_require__.o(map, req)) {\n\t\tvar e = new Error(\"Cannot find module '\" + req + \"'\");\n\t\te.code = 'MODULE_NOT_FOUND';\n\t\tthrow e;\n\t}\n\treturn map[req];\n}\nwebpackContext.keys = function webpackContextKeys() {\n\treturn Object.keys(map);\n};\nwebpackContext.resolve = webpackContextResolve;\nmodule.exports = webpackContext;\nwebpackContext.id = \"./src/themes sync recursive ^\\\\.\\\\/.*\\\\/index\\\\.scss$\";","// css-to-string-loader: transforms styles from css-loader to a string output\n\n// Get the styles\nvar styles = require(\"!!../../../node_modules/css-loader/dist/cjs.js!../../../node_modules/sass-loader/dist/cjs.js!./index.scss\");\n\nif (typeof styles === 'string') {\n // Return an existing string\n module.exports = styles;\n} else {\n // Call the custom toString method from css-loader module\n module.exports = styles.toString();\n}","// css-to-string-loader: transforms styles from css-loader to a string output\n\n// Get the styles\nvar styles = require(\"!!../../../node_modules/css-loader/dist/cjs.js!../../../node_modules/sass-loader/dist/cjs.js!./index.scss\");\n\nif (typeof styles === 'string') {\n // Return an existing string\n module.exports = styles;\n} else {\n // Call the custom toString method from css-loader module\n module.exports = styles.toString();\n}","// css-to-string-loader: transforms styles from css-loader to a string output\n\n// Get the styles\nvar styles = require(\"!!../../../node_modules/css-loader/dist/cjs.js!../../../node_modules/sass-loader/dist/cjs.js!./index.scss\");\n\nif (typeof styles === 'string') {\n // Return an existing string\n module.exports = styles;\n} else {\n // Call the custom toString method from css-loader module\n module.exports = styles.toString();\n}","// css-to-string-loader: transforms styles from css-loader to a string output\n\n// Get the styles\nvar styles = require(\"!!../../../node_modules/css-loader/dist/cjs.js!../../../node_modules/sass-loader/dist/cjs.js!./index.scss\");\n\nif (typeof styles === 'string') {\n // Return an existing string\n module.exports = styles;\n} else {\n // Call the custom toString method from css-loader module\n module.exports = styles.toString();\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} from 'd3';\nimport { logger } from './logger';\nimport { sanitizeUrl } from '@braintree/sanitize-url';\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};\n\n/**\n * @function detectType\n * Detects the type of the graph text.\n * ```mermaid\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(/^\\s*%%.*\\n/g, '\\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\n if (text.match(/^\\s*classDiagram/)) {\n return 'class';\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\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\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 const distanceToLabel = totalDistance / 2;\n\n let remainingDistance = distanceToLabel;\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 return center;\n};\n\nconst calcLabelPosition = points => {\n const p = traverseEdge(points);\n return p;\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\nexport default {\n detectType,\n isSubstringInArray,\n interpolateToCurve,\n calcLabelPosition,\n calcCardinalityPosition,\n formatUrl,\n getStylesFromArray,\n generateId\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(\"moment-mini\");","module.exports = require(\"scope-css\");"],"sourceRoot":""}