mermaid/dist/mermaid.core.mjs.map

Markdown-ish syntax for generating flowcharts, mindmaps, sequence diagrams, class diagrams, gantt charts, git graphs and more.

{
  "version": 3,
  "sources": ["../src/mermaid.ts", "../src/diagrams/c4/c4Detector.ts", "../src/diagrams/flowchart/flowDetector.ts", "../src/diagrams/flowchart/flowDetector-v2.ts", "../src/diagrams/er/erDetector.ts", "../src/diagrams/git/gitGraphDetector.ts", "../src/diagrams/gantt/ganttDetector.ts", "../src/diagrams/info/infoDetector.ts", "../src/diagrams/pie/pieDetector.ts", "../src/diagrams/quadrant-chart/quadrantDetector.ts", "../src/diagrams/xychart/xychartDetector.ts", "../src/diagrams/requirement/requirementDetector.ts", "../src/diagrams/sequence/sequenceDetector.ts", "../src/diagrams/class/classDetector.ts", "../src/diagrams/class/classDetector-V2.ts", "../src/diagrams/state/stateDetector.ts", "../src/diagrams/state/stateDetector-V2.ts", "../src/diagrams/user-journey/journeyDetector.ts", "../src/diagrams/error/errorRenderer.ts", "../src/diagrams/error/errorDiagram.ts", "../src/diagrams/flowchart/elk/detector.ts", "../src/diagrams/timeline/detector.ts", "../src/diagrams/mindmap/detector.ts", "../src/diagrams/kanban/detector.ts", "../src/diagrams/sankey/sankeyDetector.ts", "../src/diagrams/packet/detector.ts", "../src/diagrams/radar/detector.ts", "../src/diagrams/block/blockDetector.ts", "../src/diagrams/architecture/architectureDetector.ts", "../src/diagram-api/diagram-orchestration.ts", "../src/diagram-api/loadDiagram.ts", "../src/mermaidAPI.ts", "../src/accessibility.ts", "../src/Diagram.ts", "../src/interactionDb.ts", "../src/diagram-api/comments.ts", "../src/diagram-api/frontmatter.ts", "../src/preprocess.ts", "../src/utils/base64.ts"],
  "sourcesContent": ["/**\n * Web page integration module for the mermaid framework. It uses the mermaidAPI for mermaid\n * functionality and to render the diagrams to svg code!\n */\nimport { registerIconPacks } from './rendering-util/icons.js';\nimport { dedent } from 'ts-dedent';\nimport type { MermaidConfig } from './config.type.js';\nimport { detectType, registerLazyLoadedDiagrams } from './diagram-api/detectType.js';\nimport { addDiagrams } from './diagram-api/diagram-orchestration.js';\nimport { loadRegisteredDiagrams } from './diagram-api/loadDiagram.js';\nimport type { ExternalDiagramDefinition, SVG, SVGGroup } from './diagram-api/types.js';\nimport type { ParseErrorFunction } from './Diagram.js';\nimport type { UnknownDiagramError } from './errors.js';\nimport type { InternalHelpers } from './internals.js';\nimport { log } from './logger.js';\nimport { mermaidAPI } from './mermaidAPI.js';\nimport type { LayoutLoaderDefinition, RenderOptions } from './rendering-util/render.js';\nimport { registerLayoutLoaders } from './rendering-util/render.js';\nimport type { LayoutData } from './rendering-util/types.js';\nimport type { ParseOptions, ParseResult, RenderResult } from './types.js';\nimport type { DetailedError } from './utils.js';\nimport utils, { isDetailedError } from './utils.js';\n\nexport type {\n  DetailedError,\n  ExternalDiagramDefinition,\n  InternalHelpers,\n  LayoutData,\n  LayoutLoaderDefinition,\n  MermaidConfig,\n  ParseErrorFunction,\n  ParseOptions,\n  ParseResult,\n  RenderOptions,\n  RenderResult,\n  SVG,\n  SVGGroup,\n  UnknownDiagramError,\n};\n\nexport interface RunOptions {\n  /**\n   * The query selector to use when finding elements to render. Default: `\".mermaid\"`.\n   */\n  querySelector?: string;\n  /**\n   * The nodes to render. If this is set, `querySelector` will be ignored.\n   */\n  nodes?: ArrayLike<HTMLElement>;\n  /**\n   * A callback to call after each diagram is rendered.\n   */\n  postRenderCallback?: (id: string) => unknown;\n  /**\n   * If `true`, errors will be logged to the console, but not thrown. Default: `false`\n   */\n  suppressErrors?: boolean;\n}\n\nconst handleError = (error: unknown, errors: DetailedError[], parseError?: ParseErrorFunction) => {\n  log.warn(error);\n  if (isDetailedError(error)) {\n    // handle case where error string and hash were\n    // wrapped in object like`const error = { str, hash };`\n    if (parseError) {\n      parseError(error.str, error.hash);\n    }\n    errors.push({ ...error, message: error.str, error });\n  } else {\n    // assume it is just error string and pass it on\n    if (parseError) {\n      parseError(error);\n    }\n    if (error instanceof Error) {\n      errors.push({\n        str: error.message,\n        message: error.message,\n        hash: error.name,\n        error,\n      });\n    }\n  }\n};\n\n/**\n * ## run\n *\n * Function that goes through the document to find the chart definitions in there and render them.\n *\n * The function tags the processed attributes with the attribute data-processed and ignores found\n * elements with the attribute already set. This way the init function can be triggered several\n * times.\n *\n * ```mermaid\n * graph LR;\n *  a(Find elements)-->b{Processed}\n *  b-->|Yes|c(Leave element)\n *  b-->|No |d(Transform)\n * ```\n *\n * Renders the mermaid diagrams\n *\n * @param options - Optional runtime configs\n */\nconst run = async function (\n  options: RunOptions = {\n    querySelector: '.mermaid',\n  }\n) {\n  try {\n    await runThrowsErrors(options);\n  } catch (e) {\n    if (isDetailedError(e)) {\n      log.error(e.str);\n    }\n    if (mermaid.parseError) {\n      mermaid.parseError(e as string);\n    }\n    if (!options.suppressErrors) {\n      log.error('Use the suppressErrors option to suppress these errors');\n      throw e;\n    }\n  }\n};\n\nconst runThrowsErrors = async function (\n  { postRenderCallback, querySelector, nodes }: Omit<RunOptions, 'suppressErrors'> = {\n    querySelector: '.mermaid',\n  }\n) {\n  const conf = mermaidAPI.getConfig();\n\n  log.debug(`${!postRenderCallback ? 'No ' : ''}Callback function found`);\n\n  let nodesToProcess: ArrayLike<HTMLElement>;\n  if (nodes) {\n    nodesToProcess = nodes;\n  } else if (querySelector) {\n    nodesToProcess = document.querySelectorAll(querySelector);\n  } else {\n    throw new Error('Nodes and querySelector are both undefined');\n  }\n\n  log.debug(`Found ${nodesToProcess.length} diagrams`);\n  if (conf?.startOnLoad !== undefined) {\n    log.debug('Start On Load: ' + conf?.startOnLoad);\n    mermaidAPI.updateSiteConfig({ startOnLoad: conf?.startOnLoad });\n  }\n\n  // generate the id of the diagram\n  const idGenerator = new utils.InitIDGenerator(conf.deterministicIds, conf.deterministicIDSeed);\n\n  let txt: string;\n  const errors: DetailedError[] = [];\n\n  // element is the current div with mermaid class\n  // eslint-disable-next-line unicorn/prefer-spread\n  for (const element of Array.from(nodesToProcess)) {\n    log.info('Rendering diagram: ' + element.id);\n    /*! Check if previously processed */\n    if (element.getAttribute('data-processed')) {\n      continue;\n    }\n    element.setAttribute('data-processed', 'true');\n\n    const id = `mermaid-${idGenerator.next()}`;\n\n    // Fetch the graph definition including tags\n    txt = element.innerHTML;\n\n    // transforms the html to pure text\n    txt = dedent(utils.entityDecode(txt)) // removes indentation, required for YAML parsing\n      .trim()\n      .replace(/<br\\s*\\/?>/gi, '<br/>');\n\n    const init = utils.detectInit(txt);\n    if (init) {\n      log.debug('Detected early reinit: ', init);\n    }\n    try {\n      const { svg, bindFunctions } = await render(id, txt, element);\n      element.innerHTML = svg;\n      if (postRenderCallback) {\n        await postRenderCallback(id);\n      }\n      if (bindFunctions) {\n        bindFunctions(element);\n      }\n    } catch (error) {\n      handleError(error, errors, mermaid.parseError);\n    }\n  }\n  if (errors.length > 0) {\n    // TODO: We should be throwing an error object.\n    throw errors[0];\n  }\n};\n\n/**\n * Used to set configurations for mermaid.\n * This function should be called before the run function.\n * @param config - Configuration object for mermaid.\n */\n\nconst initialize = function (config: MermaidConfig) {\n  mermaidAPI.initialize(config);\n};\n\n/**\n * ## init\n *\n * @deprecated Use {@link initialize} and {@link run} instead.\n *\n * Renders the mermaid diagrams\n *\n * @param config - **Deprecated**, please set configuration in {@link initialize}.\n * @param nodes - **Default**: `.mermaid`. One of the following:\n * - A DOM Node\n * - An array of DOM nodes (as would come from a jQuery selector)\n * - A W3C selector, a la `.mermaid`\n * @param callback - Called once for each rendered diagram's id.\n */\nconst init = async function (\n  config?: MermaidConfig,\n  nodes?: string | HTMLElement | NodeListOf<HTMLElement>,\n  callback?: (id: string) => unknown\n) {\n  log.warn('mermaid.init is deprecated. Please use run instead.');\n  if (config) {\n    initialize(config);\n  }\n  const runOptions: RunOptions = { postRenderCallback: callback, querySelector: '.mermaid' };\n  if (typeof nodes === 'string') {\n    runOptions.querySelector = nodes;\n  } else if (nodes) {\n    if (nodes instanceof HTMLElement) {\n      runOptions.nodes = [nodes];\n    } else {\n      runOptions.nodes = nodes;\n    }\n  }\n  await run(runOptions);\n};\n\n/**\n * Used to register external diagram types.\n * @param diagrams - Array of {@link ExternalDiagramDefinition}.\n * @param opts - If opts.lazyLoad is false, the diagrams will be loaded immediately.\n */\nconst registerExternalDiagrams = async (\n  diagrams: ExternalDiagramDefinition[],\n  {\n    lazyLoad = true,\n  }: {\n    lazyLoad?: boolean;\n  } = {}\n) => {\n  addDiagrams();\n  registerLazyLoadedDiagrams(...diagrams);\n  if (lazyLoad === false) {\n    await loadRegisteredDiagrams();\n  }\n};\n\n/**\n * ##contentLoaded Callback function that is called when page is loaded. This functions fetches\n * configuration for mermaid rendering and calls init for rendering the mermaid diagrams on the\n * page.\n */\nconst contentLoaded = function () {\n  if (mermaid.startOnLoad) {\n    const { startOnLoad } = mermaidAPI.getConfig();\n    if (startOnLoad) {\n      mermaid.run().catch((err) => log.error('Mermaid failed to initialize', err));\n    }\n  }\n};\n\nif (typeof document !== 'undefined') {\n  /*!\n   * Wait for document loaded before starting the execution\n   */\n  window.addEventListener('load', contentLoaded, false);\n}\n\n/**\n * ## setParseErrorHandler  Alternative to directly setting parseError using:\n *\n * ```js\n * mermaid.parseError = function(err,hash) {\n *   forExampleDisplayErrorInGui(err);  // do something with the error\n * };\n * ```\n *\n * This is provided for environments where the mermaid object can't directly have a new member added\n * to it (eg. dart interop wrapper). (Initially there is no parseError member of mermaid).\n *\n * @param parseErrorHandler - New parseError() callback.\n */\nconst setParseErrorHandler = function (parseErrorHandler: (err: any, hash: any) => void) {\n  mermaid.parseError = parseErrorHandler;\n};\n\nconst executionQueue: (() => Promise<unknown>)[] = [];\nlet executionQueueRunning = false;\nconst executeQueue = async () => {\n  if (executionQueueRunning) {\n    return;\n  }\n  executionQueueRunning = true;\n  while (executionQueue.length > 0) {\n    const f = executionQueue.shift();\n    if (f) {\n      try {\n        await f();\n      } catch (e) {\n        log.error('Error executing queue', e);\n      }\n    }\n  }\n  executionQueueRunning = false;\n};\n\n/**\n * Parse the text and validate the syntax.\n * @param text - The mermaid diagram definition.\n * @param parseOptions - Options for parsing. @see {@link ParseOptions}\n * @returns If valid, {@link ParseResult} otherwise `false` if parseOptions.suppressErrors is `true`.\n * @throws Error if the diagram is invalid and parseOptions.suppressErrors is false or not set.\n *\n * @example\n * ```js\n * console.log(await mermaid.parse('flowchart \\n a --> b'));\n * // { diagramType: 'flowchart-v2' }\n * console.log(await mermaid.parse('wrong \\n a --> b', { suppressErrors: true }));\n * // false\n * console.log(await mermaid.parse('wrong \\n a --> b', { suppressErrors: false }));\n * // throws Error\n * console.log(await mermaid.parse('wrong \\n a --> b'));\n * // throws Error\n * ```\n */\nconst parse: typeof mermaidAPI.parse = async (text, parseOptions) => {\n  return new Promise((resolve, reject) => {\n    // This promise will resolve when the render call is done.\n    // It will be queued first and will be executed when it is first in line\n    const performCall = () =>\n      new Promise((res, rej) => {\n        mermaidAPI.parse(text, parseOptions).then(\n          (r) => {\n            // This resolves for the promise for the queue handling\n            res(r);\n            // This fulfills the promise sent to the value back to the original caller\n            resolve(r);\n          },\n          (e) => {\n            log.error('Error parsing', e);\n            mermaid.parseError?.(e);\n            rej(e);\n            reject(e);\n          }\n        );\n      });\n    executionQueue.push(performCall);\n    executeQueue().catch(reject);\n  });\n};\n\n/**\n * Function that renders an svg with a graph from a chart definition. Usage example below.\n *\n * ```javascript\n *  element = document.querySelector('#graphDiv');\n *  const graphDefinition = 'graph TB\\na-->b';\n *  const { svg, bindFunctions } = await mermaid.render('graphDiv', graphDefinition);\n *  element.innerHTML = svg;\n *  bindFunctions?.(element);\n * ```\n *\n * @remarks\n * Multiple calls to this function will be enqueued to run serially.\n *\n * @param id - The id for the SVG element (the element to be rendered)\n * @param text - The text for the graph definition\n * @param container - HTML element where the svg will be inserted. (Is usually element with the .mermaid class)\n *   If no svgContainingElement is provided then the SVG element will be appended to the body.\n *    Selector to element in which a div with the graph temporarily will be\n *   inserted. If one is provided a hidden div will be inserted in the body of the page instead. The\n *   element will be removed when rendering is completed.\n * @returns Returns the SVG Definition and BindFunctions.\n */\nconst render: typeof mermaidAPI.render = (id, text, container) => {\n  return new Promise((resolve, reject) => {\n    // This promise will resolve when the mermaidAPI.render call is done.\n    // It will be queued first and will be executed when it is first in line\n    const performCall = () =>\n      new Promise((res, rej) => {\n        mermaidAPI.render(id, text, container).then(\n          (r) => {\n            // This resolves for the promise for the queue handling\n            res(r);\n            // This fulfills the promise sent to the value back to the original caller\n            resolve(r);\n          },\n          (e) => {\n            log.error('Error parsing', e);\n            mermaid.parseError?.(e);\n            rej(e);\n            reject(e);\n          }\n        );\n      });\n    executionQueue.push(performCall);\n    executeQueue().catch(reject);\n  });\n};\n\nexport interface Mermaid {\n  startOnLoad: boolean;\n  parseError?: ParseErrorFunction;\n  /**\n   * @deprecated Use {@link parse} and {@link render} instead. Please [open a discussion](https://github.com/mermaid-js/mermaid/discussions) if your use case does not fit the new API.\n   * @internal\n   */\n  mermaidAPI: typeof mermaidAPI;\n  parse: typeof parse;\n  render: typeof render;\n  /**\n   * @deprecated Use {@link initialize} and {@link run} instead.\n   */\n  init: typeof init;\n  run: typeof run;\n  registerLayoutLoaders: typeof registerLayoutLoaders;\n  registerExternalDiagrams: typeof registerExternalDiagrams;\n  initialize: typeof initialize;\n  contentLoaded: typeof contentLoaded;\n  setParseErrorHandler: typeof setParseErrorHandler;\n  detectType: typeof detectType;\n  registerIconPacks: typeof registerIconPacks;\n}\n\nconst mermaid: Mermaid = {\n  startOnLoad: true,\n  mermaidAPI,\n  parse,\n  render,\n  init,\n  run,\n  registerExternalDiagrams,\n  registerLayoutLoaders,\n  initialize,\n  parseError: undefined,\n  contentLoaded,\n  setParseErrorHandler,\n  detectType,\n  registerIconPacks,\n};\n\nexport default mermaid;\n", "import type {\n  DiagramDetector,\n  DiagramLoader,\n  ExternalDiagramDefinition,\n} from '../../diagram-api/types.js';\n\nconst id = 'c4';\n\nconst detector: DiagramDetector = (txt) => {\n  return /^\\s*C4Context|C4Container|C4Component|C4Dynamic|C4Deployment/.test(txt);\n};\n\nconst loader: DiagramLoader = async () => {\n  const { diagram } = await import('./c4Diagram.js');\n  return { id, diagram };\n};\n\nconst plugin: ExternalDiagramDefinition = {\n  id,\n  detector,\n  loader,\n};\n\nexport default plugin;\n", "import type {\n  DiagramDetector,\n  DiagramLoader,\n  ExternalDiagramDefinition,\n} from '../../diagram-api/types.js';\n\nconst id = 'flowchart';\n\nconst detector: DiagramDetector = (txt, config) => {\n  // If we have conferred to only use new flow charts this function should always return false\n  // as in not signalling true for a legacy flowchart\n  if (\n    config?.flowchart?.defaultRenderer === 'dagre-wrapper' ||\n    config?.flowchart?.defaultRenderer === 'elk'\n  ) {\n    return false;\n  }\n  return /^\\s*graph/.test(txt);\n};\n\nconst loader: DiagramLoader = async () => {\n  const { diagram } = await import('./flowDiagram.js');\n  return { id, diagram };\n};\n\nconst plugin: ExternalDiagramDefinition = {\n  id,\n  detector,\n  loader,\n};\n\nexport default plugin;\n", "import type {\n  DiagramDetector,\n  DiagramLoader,\n  ExternalDiagramDefinition,\n} from '../../diagram-api/types.js';\n\nconst id = 'flowchart-v2';\n\nconst detector: DiagramDetector = (txt, config) => {\n  if (config?.flowchart?.defaultRenderer === 'dagre-d3') {\n    return false;\n  }\n\n  if (config?.flowchart?.defaultRenderer === 'elk') {\n    config.layout = 'elk';\n  }\n\n  // If we have configured to use dagre-wrapper then we should return true in this function for graph code thus making it use the new flowchart diagram\n  if (/^\\s*graph/.test(txt) && config?.flowchart?.defaultRenderer === 'dagre-wrapper') {\n    return true;\n  }\n  return /^\\s*flowchart/.test(txt);\n};\n\nconst loader: DiagramLoader = async () => {\n  const { diagram } = await import('./flowDiagram.js');\n  return { id, diagram };\n};\n\nconst plugin: ExternalDiagramDefinition = {\n  id,\n  detector,\n  loader,\n};\n\nexport default plugin;\n", "import type {\n  DiagramDetector,\n  DiagramLoader,\n  ExternalDiagramDefinition,\n} from '../../diagram-api/types.js';\n\nconst id = 'er';\n\nconst detector: DiagramDetector = (txt) => {\n  return /^\\s*erDiagram/.test(txt);\n};\n\nconst loader: DiagramLoader = async () => {\n  const { diagram } = await import('./erDiagram.js');\n  return { id, diagram };\n};\n\nconst plugin: ExternalDiagramDefinition = {\n  id,\n  detector,\n  loader,\n};\n\nexport default plugin;\n", "import type { DiagramDetector, DiagramLoader } from '../../diagram-api/types.js';\nimport type { ExternalDiagramDefinition } from '../../diagram-api/types.js';\n\nconst id = 'gitGraph';\n\nconst detector: DiagramDetector = (txt) => {\n  return /^\\s*gitGraph/.test(txt);\n};\n\nconst loader: DiagramLoader = async () => {\n  const { diagram } = await import('./gitGraphDiagram.js');\n  return { id, diagram };\n};\n\nconst plugin: ExternalDiagramDefinition = {\n  id,\n  detector,\n  loader,\n};\n\nexport default plugin;\n", "import type {\n  DiagramDetector,\n  DiagramLoader,\n  ExternalDiagramDefinition,\n} from '../../diagram-api/types.js';\n\nconst id = 'gantt';\n\nconst detector: DiagramDetector = (txt) => {\n  return /^\\s*gantt/.test(txt);\n};\n\nconst loader: DiagramLoader = async () => {\n  const { diagram } = await import('./ganttDiagram.js');\n  return { id, diagram };\n};\n\nconst plugin: ExternalDiagramDefinition = {\n  id,\n  detector,\n  loader,\n};\n\nexport default plugin;\n", "import type {\n  DiagramDetector,\n  DiagramLoader,\n  ExternalDiagramDefinition,\n} from '../../diagram-api/types.js';\n\nconst id = 'info';\n\nconst detector: DiagramDetector = (txt) => {\n  return /^\\s*info/.test(txt);\n};\n\nconst loader: DiagramLoader = async () => {\n  const { diagram } = await import('./infoDiagram.js');\n  return { id, diagram };\n};\n\nexport const info: ExternalDiagramDefinition = {\n  id,\n  detector,\n  loader,\n};\n", "import type {\n  DiagramDetector,\n  DiagramLoader,\n  ExternalDiagramDefinition,\n} from '../../diagram-api/types.js';\n\nconst id = 'pie';\n\nconst detector: DiagramDetector = (txt) => {\n  return /^\\s*pie/.test(txt);\n};\n\nconst loader: DiagramLoader = async () => {\n  const { diagram } = await import('./pieDiagram.js');\n  return { id, diagram };\n};\n\nexport const pie: ExternalDiagramDefinition = {\n  id,\n  detector,\n  loader,\n};\n", "import type {\n  DiagramDetector,\n  DiagramLoader,\n  ExternalDiagramDefinition,\n} from '../../diagram-api/types.js';\n\nconst id = 'quadrantChart';\n\nconst detector: DiagramDetector = (txt) => {\n  return /^\\s*quadrantChart/.test(txt);\n};\n\nconst loader: DiagramLoader = async () => {\n  const { diagram } = await import('./quadrantDiagram.js');\n  return { id, diagram };\n};\n\nconst plugin: ExternalDiagramDefinition = {\n  id,\n  detector,\n  loader,\n};\n\nexport default plugin;\n", "import type {\n  DiagramDetector,\n  DiagramLoader,\n  ExternalDiagramDefinition,\n} from '../../diagram-api/types.js';\n\nconst id = 'xychart';\n\nconst detector: DiagramDetector = (txt) => {\n  return /^\\s*xychart-beta/.test(txt);\n};\n\nconst loader: DiagramLoader = async () => {\n  const { diagram } = await import('./xychartDiagram.js');\n  return { id, diagram };\n};\n\nconst plugin: ExternalDiagramDefinition = {\n  id,\n  detector,\n  loader,\n};\n\nexport default plugin;\n", "import type {\n  DiagramDetector,\n  DiagramLoader,\n  ExternalDiagramDefinition,\n} from '../../diagram-api/types.js';\n\nconst id = 'requirement';\n\nconst detector: DiagramDetector = (txt) => {\n  return /^\\s*requirement(Diagram)?/.test(txt);\n};\n\nconst loader: DiagramLoader = async () => {\n  const { diagram } = await import('./requirementDiagram.js');\n  return { id, diagram };\n};\n\nconst plugin: ExternalDiagramDefinition = {\n  id,\n  detector,\n  loader,\n};\n\nexport default plugin;\n", "import type {\n  DiagramDetector,\n  DiagramLoader,\n  ExternalDiagramDefinition,\n} from '../../diagram-api/types.js';\n\nconst id = 'sequence';\n\nconst detector: DiagramDetector = (txt) => {\n  return /^\\s*sequenceDiagram/.test(txt);\n};\n\nconst loader: DiagramLoader = async () => {\n  const { diagram } = await import('./sequenceDiagram.js');\n  return { id, diagram };\n};\n\nconst plugin: ExternalDiagramDefinition = {\n  id,\n  detector,\n  loader,\n};\n\nexport default plugin;\n", "import type {\n  DiagramDetector,\n  DiagramLoader,\n  ExternalDiagramDefinition,\n} from '../../diagram-api/types.js';\n\nconst id = 'class';\n\nconst detector: DiagramDetector = (txt, config) => {\n  // If we have configured to use dagre-wrapper then we should never return true in this function\n  if (config?.class?.defaultRenderer === 'dagre-wrapper') {\n    return false;\n  }\n  // We have not opted to use the new renderer so we should return true if we detect a class diagram\n  return /^\\s*classDiagram/.test(txt);\n};\n\nconst loader: DiagramLoader = async () => {\n  const { diagram } = await import('./classDiagram.js');\n  return { id, diagram };\n};\n\nconst plugin: ExternalDiagramDefinition = {\n  id,\n  detector,\n  loader,\n};\n\nexport default plugin;\n", "import type {\n  DiagramDetector,\n  DiagramLoader,\n  ExternalDiagramDefinition,\n} from '../../diagram-api/types.js';\n\nconst id = 'classDiagram';\n\nconst detector: DiagramDetector = (txt, config) => {\n  // If we have configured to use dagre-wrapper then we should return true in this function for classDiagram code thus making it use the new class diagram\n  if (/^\\s*classDiagram/.test(txt) && config?.class?.defaultRenderer === 'dagre-wrapper') {\n    return true;\n  }\n  // We have not opted to use the new renderer so we should return true if we detect a class diagram\n  return /^\\s*classDiagram-v2/.test(txt);\n};\n\nconst loader: DiagramLoader = async () => {\n  const { diagram } = await import('./classDiagram-v2.js');\n  return { id, diagram };\n};\n\nconst plugin: ExternalDiagramDefinition = {\n  id,\n  detector,\n  loader,\n};\n\nexport default plugin;\n", "import type {\n  DiagramDetector,\n  DiagramLoader,\n  ExternalDiagramDefinition,\n} from '../../diagram-api/types.js';\n\nconst id = 'state';\n\nconst detector: DiagramDetector = (txt, config) => {\n  // If we have confirmed to only use new state diagrams this function should always return false\n  // as in not signalling true for a legacy state diagram\n  if (config?.state?.defaultRenderer === 'dagre-wrapper') {\n    return false;\n  }\n  return /^\\s*stateDiagram/.test(txt);\n};\n\nconst loader: DiagramLoader = async () => {\n  const { diagram } = await import('./stateDiagram.js');\n  return { id, diagram };\n};\n\nconst plugin: ExternalDiagramDefinition = {\n  id,\n  detector,\n  loader,\n};\n\nexport default plugin;\n", "import type {\n  DiagramDetector,\n  DiagramLoader,\n  ExternalDiagramDefinition,\n} from '../../diagram-api/types.js';\n\nconst id = 'stateDiagram';\n\nconst detector: DiagramDetector = (txt, config) => {\n  if (/^\\s*stateDiagram-v2/.test(txt)) {\n    return true;\n  }\n  if (/^\\s*stateDiagram/.test(txt) && config?.state?.defaultRenderer === 'dagre-wrapper') {\n    return true;\n  }\n  return false;\n};\n\nconst loader: DiagramLoader = async () => {\n  const { diagram } = await import('./stateDiagram-v2.js');\n  return { id, diagram };\n};\n\nconst plugin: ExternalDiagramDefinition = {\n  id,\n  detector,\n  loader,\n};\n\nexport default plugin;\n", "import type {\n  DiagramDetector,\n  DiagramLoader,\n  ExternalDiagramDefinition,\n} from '../../diagram-api/types.js';\n\nconst id = 'journey';\n\nconst detector: DiagramDetector = (txt) => {\n  return /^\\s*journey/.test(txt);\n};\n\nconst loader: DiagramLoader = async () => {\n  const { diagram } = await import('./journeyDiagram.js');\n  return { id, diagram };\n};\n\nconst plugin: ExternalDiagramDefinition = {\n  id,\n  detector,\n  loader,\n};\n\nexport default plugin;\n", "import type { SVG, SVGGroup } from '../../diagram-api/types.js';\nimport { log } from '../../logger.js';\nimport { selectSvgElement } from '../../rendering-util/selectSvgElement.js';\nimport { configureSvgSize } from '../../setupGraphViewbox.js';\n\n/**\n * Draws an info picture in the tag with id: id based on the graph definition in text.\n *\n * @param _text - Mermaid graph definition.\n * @param id - The text for the error\n * @param version - The version\n */\nexport const draw = (_text: string, id: string, version: string) => {\n  log.debug('rendering svg for syntax error\\n');\n  const svg: SVG = selectSvgElement(id);\n  const g: SVGGroup = svg.append('g');\n\n  svg.attr('viewBox', '0 0 2412 512');\n  configureSvgSize(svg, 100, 512, true);\n\n  g.append('path')\n    .attr('class', 'error-icon')\n    .attr(\n      'd',\n      'm411.313,123.313c6.25-6.25 6.25-16.375 0-22.625s-16.375-6.25-22.625,0l-32,32-9.375,9.375-20.688-20.688c-12.484-12.5-32.766-12.5-45.25,0l-16,16c-1.261,1.261-2.304,2.648-3.31,4.051-21.739-8.561-45.324-13.426-70.065-13.426-105.867,0-192,86.133-192,192s86.133,192 192,192 192-86.133 192-192c0-24.741-4.864-48.327-13.426-70.065 1.402-1.007 2.79-2.049 4.051-3.31l16-16c12.5-12.492 12.5-32.758 0-45.25l-20.688-20.688 9.375-9.375 32.001-31.999zm-219.313,100.687c-52.938,0-96,43.063-96,96 0,8.836-7.164,16-16,16s-16-7.164-16-16c0-70.578 57.422-128 128-128 8.836,0 16,7.164 16,16s-7.164,16-16,16z'\n    );\n\n  g.append('path')\n    .attr('class', 'error-icon')\n    .attr(\n      'd',\n      'm459.02,148.98c-6.25-6.25-16.375-6.25-22.625,0s-6.25,16.375 0,22.625l16,16c3.125,3.125 7.219,4.688 11.313,4.688 4.094,0 8.188-1.563 11.313-4.688 6.25-6.25 6.25-16.375 0-22.625l-16.001-16z'\n    );\n\n  g.append('path')\n    .attr('class', 'error-icon')\n    .attr(\n      'd',\n      'm340.395,75.605c3.125,3.125 7.219,4.688 11.313,4.688 4.094,0 8.188-1.563 11.313-4.688 6.25-6.25 6.25-16.375 0-22.625l-16-16c-6.25-6.25-16.375-6.25-22.625,0s-6.25,16.375 0,22.625l15.999,16z'\n    );\n\n  g.append('path')\n    .attr('class', 'error-icon')\n    .attr(\n      'd',\n      'm400,64c8.844,0 16-7.164 16-16v-32c0-8.836-7.156-16-16-16-8.844,0-16,7.164-16,16v32c0,8.836 7.156,16 16,16z'\n    );\n\n  g.append('path')\n    .attr('class', 'error-icon')\n    .attr(\n      'd',\n      'm496,96.586h-32c-8.844,0-16,7.164-16,16 0,8.836 7.156,16 16,16h32c8.844,0 16-7.164 16-16 0-8.836-7.156-16-16-16z'\n    );\n\n  g.append('path')\n    .attr('class', 'error-icon')\n    .attr(\n      'd',\n      'm436.98,75.605c3.125,3.125 7.219,4.688 11.313,4.688 4.094,0 8.188-1.563 11.313-4.688l32-32c6.25-6.25 6.25-16.375 0-22.625s-16.375-6.25-22.625,0l-32,32c-6.251,6.25-6.251,16.375-0.001,22.625z'\n    );\n\n  g.append('text') // text label for the x axis\n    .attr('class', 'error-text')\n    .attr('x', 1440)\n    .attr('y', 250)\n    .attr('font-size', '150px')\n    .style('text-anchor', 'middle')\n    .text('Syntax error in text');\n  g.append('text') // text label for the x axis\n    .attr('class', 'error-text')\n    .attr('x', 1250)\n    .attr('y', 400)\n    .attr('font-size', '100px')\n    .style('text-anchor', 'middle')\n    .text(`mermaid version ${version}`);\n};\n\nexport const renderer = { draw };\n\nexport default renderer;\n", "import type { DiagramDefinition } from '../../diagram-api/types.js';\nimport { renderer } from './errorRenderer.js';\n\nconst diagram: DiagramDefinition = {\n  db: {},\n  renderer,\n  parser: {\n    parse: (): void => {\n      return;\n    },\n  },\n};\n\nexport default diagram;\n", "import type {\n  DiagramDetector,\n  DiagramLoader,\n  ExternalDiagramDefinition,\n} from '../../../diagram-api/types.js';\n\nconst id = 'flowchart-elk';\n\nconst detector: DiagramDetector = (txt, config = {}): boolean => {\n  if (\n    // If diagram explicitly states flowchart-elk\n    /^\\s*flowchart-elk/.test(txt) ||\n    // If a flowchart/graph diagram has their default renderer set to elk\n    (/^\\s*flowchart|graph/.test(txt) && config?.flowchart?.defaultRenderer === 'elk')\n  ) {\n    config.layout = 'elk';\n    return true;\n  }\n  return false;\n};\n\nconst loader: DiagramLoader = async () => {\n  const { diagram } = await import('../flowDiagram.js');\n  return { id, diagram };\n};\n\nconst plugin: ExternalDiagramDefinition = {\n  id,\n  detector,\n  loader,\n};\n\nexport default plugin;\n", "import type {\n  DiagramDetector,\n  DiagramLoader,\n  ExternalDiagramDefinition,\n} from '../../diagram-api/types.js';\n\nconst id = 'timeline';\n\nconst detector: DiagramDetector = (txt) => {\n  return /^\\s*timeline/.test(txt);\n};\n\nconst loader: DiagramLoader = async () => {\n  const { diagram } = await import('./timeline-definition.js');\n  return { id, diagram };\n};\n\nconst plugin: ExternalDiagramDefinition = {\n  id,\n  detector,\n  loader,\n};\n\nexport default plugin;\n", "import type {\n  DiagramDetector,\n  DiagramLoader,\n  ExternalDiagramDefinition,\n} from '../../diagram-api/types.js';\nconst id = 'mindmap';\n\nconst detector: DiagramDetector = (txt) => {\n  return /^\\s*mindmap/.test(txt);\n};\n\nconst loader: DiagramLoader = async () => {\n  const { diagram } = await import('./mindmap-definition.js');\n  return { id, diagram };\n};\n\nconst plugin: ExternalDiagramDefinition = {\n  id,\n  detector,\n  loader,\n};\n\nexport default plugin;\n", "import type {\n  DiagramDetector,\n  DiagramLoader,\n  ExternalDiagramDefinition,\n} from '../../diagram-api/types.js';\nconst id = 'kanban';\n\nconst detector: DiagramDetector = (txt) => {\n  return /^\\s*kanban/.test(txt);\n};\n\nconst loader: DiagramLoader = async () => {\n  const { diagram } = await import('./kanban-definition.js');\n  return { id, diagram };\n};\n\nconst plugin: ExternalDiagramDefinition = {\n  id,\n  detector,\n  loader,\n};\n\nexport default plugin;\n", "import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-api/types.js';\n\nconst id = 'sankey';\n\nconst detector: DiagramDetector = (txt) => {\n  return /^\\s*sankey-beta/.test(txt);\n};\n\nconst loader = async () => {\n  const { diagram } = await import('./sankeyDiagram.js');\n  return { id, diagram };\n};\n\nconst plugin: ExternalDiagramDefinition = {\n  id,\n  detector,\n  loader,\n};\n\nexport default plugin;\n", "import type {\n  DiagramDetector,\n  DiagramLoader,\n  ExternalDiagramDefinition,\n} from '../../diagram-api/types.js';\n\nconst id = 'packet';\n\nconst detector: DiagramDetector = (txt) => {\n  return /^\\s*packet-beta/.test(txt);\n};\n\nconst loader: DiagramLoader = async () => {\n  const { diagram } = await import('./diagram.js');\n  return { id, diagram };\n};\n\nexport const packet: ExternalDiagramDefinition = {\n  id,\n  detector,\n  loader,\n};\n", "import type {\n  DiagramDetector,\n  DiagramLoader,\n  ExternalDiagramDefinition,\n} from '../../diagram-api/types.js';\n\nconst id = 'radar';\n\nconst detector: DiagramDetector = (txt) => {\n  return /^\\s*radar-beta/.test(txt);\n};\n\nconst loader: DiagramLoader = async () => {\n  const { diagram } = await import('./diagram.js');\n  return { id, diagram };\n};\n\nexport const radar: ExternalDiagramDefinition = {\n  id,\n  detector,\n  loader,\n};\n", "import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-api/types.js';\n\nconst id = 'block';\n\nconst detector: DiagramDetector = (txt) => {\n  return /^\\s*block-beta/.test(txt);\n};\n\nconst loader = async () => {\n  const { diagram } = await import('./blockDiagram.js');\n  return { id, diagram };\n};\n\nconst plugin: ExternalDiagramDefinition = {\n  id,\n  detector,\n  loader,\n};\n\nexport default plugin;\n", "import type {\n  DiagramDetector,\n  DiagramLoader,\n  ExternalDiagramDefinition,\n} from '../../diagram-api/types.js';\n\nconst id = 'architecture';\n\nconst detector: DiagramDetector = (txt) => {\n  return /^\\s*architecture/.test(txt);\n};\n\nconst loader: DiagramLoader = async () => {\n  const { diagram } = await import('./architectureDiagram.js');\n  return { id, diagram };\n};\n\nconst architecture: ExternalDiagramDefinition = {\n  id,\n  detector,\n  loader,\n};\n\nexport default architecture;\n", "import c4 from '../diagrams/c4/c4Detector.js';\nimport flowchart from '../diagrams/flowchart/flowDetector.js';\nimport flowchartV2 from '../diagrams/flowchart/flowDetector-v2.js';\nimport er from '../diagrams/er/erDetector.js';\nimport git from '../diagrams/git/gitGraphDetector.js';\nimport gantt from '../diagrams/gantt/ganttDetector.js';\nimport { info } from '../diagrams/info/infoDetector.js';\nimport { pie } from '../diagrams/pie/pieDetector.js';\nimport quadrantChart from '../diagrams/quadrant-chart/quadrantDetector.js';\nimport xychart from '../diagrams/xychart/xychartDetector.js';\nimport requirement from '../diagrams/requirement/requirementDetector.js';\nimport sequence from '../diagrams/sequence/sequenceDetector.js';\nimport classDiagram from '../diagrams/class/classDetector.js';\nimport classDiagramV2 from '../diagrams/class/classDetector-V2.js';\nimport state from '../diagrams/state/stateDetector.js';\nimport stateV2 from '../diagrams/state/stateDetector-V2.js';\nimport journey from '../diagrams/user-journey/journeyDetector.js';\nimport errorDiagram from '../diagrams/error/errorDiagram.js';\nimport flowchartElk from '../diagrams/flowchart/elk/detector.js';\nimport timeline from '../diagrams/timeline/detector.js';\nimport mindmap from '../diagrams/mindmap/detector.js';\nimport kanban from '../diagrams/kanban/detector.js';\nimport sankey from '../diagrams/sankey/sankeyDetector.js';\nimport { packet } from '../diagrams/packet/detector.js';\nimport { radar } from '../diagrams/radar/detector.js';\nimport block from '../diagrams/block/blockDetector.js';\nimport architecture from '../diagrams/architecture/architectureDetector.js';\nimport { registerLazyLoadedDiagrams } from './detectType.js';\nimport { registerDiagram } from './diagramAPI.js';\n\nlet hasLoadedDiagrams = false;\nexport const addDiagrams = () => {\n  if (hasLoadedDiagrams) {\n    return;\n  }\n  // This is added here to avoid race-conditions.\n  // We could optimize the loading logic somehow.\n  hasLoadedDiagrams = true;\n  registerDiagram('error', errorDiagram, (text) => {\n    return text.toLowerCase().trim() === 'error';\n  });\n  registerDiagram(\n    '---',\n    // --- diagram type may appear if YAML front-matter is not parsed correctly\n    {\n      db: {\n        clear: () => {\n          // Quite ok, clear needs to be there for --- to work as a regular diagram\n        },\n      },\n      styles: {}, // should never be used\n      renderer: {\n        draw: () => {\n          // should never be used\n        },\n      },\n      parser: {\n        parse: () => {\n          throw new Error(\n            'Diagrams beginning with --- are not valid. ' +\n              'If you were trying to use a YAML front-matter, please ensure that ' +\n              \"you've correctly opened and closed the YAML front-matter with un-indented `---` blocks\"\n          );\n        },\n      },\n      init: () => null, // no op\n    },\n    (text) => {\n      return text.toLowerCase().trimStart().startsWith('---');\n    }\n  );\n  // Ordering of detectors is important. The first one to return true will be used.\n  registerLazyLoadedDiagrams(\n    c4,\n    kanban,\n    classDiagramV2,\n    classDiagram,\n    er,\n    gantt,\n    info,\n    pie,\n    requirement,\n    sequence,\n    flowchartElk,\n    flowchartV2,\n    flowchart,\n    mindmap,\n    timeline,\n    git,\n    stateV2,\n    state,\n    journey,\n    quadrantChart,\n    sankey,\n    packet,\n    xychart,\n    block,\n    architecture,\n    radar\n  );\n};\n", "import { log } from '../logger.js';\nimport { detectors } from './detectType.js';\nimport { getDiagram, registerDiagram } from './diagramAPI.js';\n\nexport const loadRegisteredDiagrams = async () => {\n  log.debug(`Loading registered diagrams`);\n  // Load all lazy loaded diagrams in parallel\n  const results = await Promise.allSettled(\n    Object.entries(detectors).map(async ([key, { detector, loader }]) => {\n      if (loader) {\n        try {\n          getDiagram(key);\n        } catch {\n          try {\n            // Register diagram if it is not already registered\n            const { diagram, id } = await loader();\n            registerDiagram(id, diagram, detector);\n          } catch (err) {\n            // Remove failed diagram from detectors\n            log.error(`Failed to load external diagram with key ${key}. Removing from detectors.`);\n            delete detectors[key];\n            throw err;\n          }\n        }\n      }\n    })\n  );\n  const failed = results.filter((result) => result.status === 'rejected');\n  if (failed.length > 0) {\n    log.error(`Failed to load ${failed.length} external diagrams`);\n    for (const res of failed) {\n      log.error(res);\n    }\n    throw new Error(`Failed to load ${failed.length} external diagrams`);\n  }\n};\n", "/**\n * This file contains functions that are used internally by mermaid\n * and is not intended to be used by the end user.\n */\n// @ts-ignore TODO: Investigate D3 issue\nimport { select } from 'd3';\nimport { compile, serialize, stringify } from 'stylis';\n// @ts-ignore: TODO Fix ts errors\nimport DOMPurify from 'dompurify';\nimport isEmpty from 'lodash-es/isEmpty.js';\nimport packageJson from '../package.json' assert { type: 'json' };\nimport { addSVGa11yTitleDescription, setA11yDiagramInfo } from './accessibility.js';\nimport assignWithDepth from './assignWithDepth.js';\nimport * as configApi from './config.js';\nimport type { MermaidConfig } from './config.type.js';\nimport { addDiagrams } from './diagram-api/diagram-orchestration.js';\nimport type { DiagramMetadata, DiagramStyleClassDef } from './diagram-api/types.js';\nimport { Diagram } from './Diagram.js';\nimport { evaluate } from './diagrams/common/common.js';\nimport errorRenderer from './diagrams/error/errorRenderer.js';\nimport { attachFunctions } from './interactionDb.js';\nimport { log, setLogLevel } from './logger.js';\nimport { preprocessDiagram } from './preprocess.js';\nimport getStyles from './styles.js';\nimport theme from './themes/index.js';\nimport type { D3Element, ParseOptions, ParseResult, RenderResult } from './types.js';\nimport { decodeEntities } from './utils.js';\nimport { toBase64 } from './utils/base64.js';\n\nconst MAX_TEXTLENGTH = 50_000;\nconst MAX_TEXTLENGTH_EXCEEDED_MSG =\n  'graph TB;a[Maximum text size in diagram exceeded];style a fill:#faa';\n\nconst SECURITY_LVL_SANDBOX = 'sandbox';\nconst SECURITY_LVL_LOOSE = 'loose';\n\nconst XMLNS_SVG_STD = 'http://www.w3.org/2000/svg';\nconst XMLNS_XLINK_STD = 'http://www.w3.org/1999/xlink';\nconst XMLNS_XHTML_STD = 'http://www.w3.org/1999/xhtml';\n\n// ------------------------------\n// iFrame\nconst IFRAME_WIDTH = '100%';\nconst IFRAME_HEIGHT = '100%';\nconst IFRAME_STYLES = 'border:0;margin:0;';\nconst IFRAME_BODY_STYLE = 'margin:0';\nconst IFRAME_SANDBOX_OPTS = 'allow-top-navigation-by-user-activation allow-popups';\nconst IFRAME_NOT_SUPPORTED_MSG = 'The \"iframe\" tag is not supported by your browser.';\n\n// DOMPurify settings for svgCode\nconst DOMPURIFY_TAGS = ['foreignobject'];\nconst DOMPURIFY_ATTR = ['dominant-baseline'];\n\nfunction processAndSetConfigs(text: string) {\n  const processed = preprocessDiagram(text);\n  configApi.reset();\n  configApi.addDirective(processed.config ?? {});\n  return processed;\n}\n\n/**\n * Parse the text and validate the syntax.\n * @param text - The mermaid diagram definition.\n * @param parseOptions - Options for parsing. @see {@link ParseOptions}\n * @returns An object with the `diagramType` set to type of the diagram if valid. Otherwise `false` if parseOptions.suppressErrors is `true`.\n * @throws Error if the diagram is invalid and parseOptions.suppressErrors is false or not set.\n */\nasync function parse(\n  text: string,\n  parseOptions: ParseOptions & { suppressErrors: true }\n): Promise<ParseResult | false>;\nasync function parse(text: string, parseOptions?: ParseOptions): Promise<ParseResult>;\nasync function parse(text: string, parseOptions?: ParseOptions): Promise<ParseResult | false> {\n  addDiagrams();\n  try {\n    const { code, config } = processAndSetConfigs(text);\n    const diagram = await getDiagramFromText(code);\n    return { diagramType: diagram.type, config };\n  } catch (error) {\n    if (parseOptions?.suppressErrors) {\n      return false;\n    }\n    throw error;\n  }\n}\n\n/**\n * Create a CSS style that starts with the given class name, then the element,\n * with an enclosing block that has each of the cssClasses followed by !important;\n * @param cssClass - CSS class name\n * @param element - CSS element\n * @param cssClasses - list of CSS styles to append after the element\n * @returns - the constructed string\n */\nexport const cssImportantStyles = (\n  cssClass: string,\n  element: string,\n  cssClasses: string[] = []\n): string => {\n  return `\\n.${cssClass} ${element} { ${cssClasses.join(' !important; ')} !important; }`;\n};\n\n/**\n * Create the user styles\n * @internal\n * @param  config - configuration that has style and theme settings to use\n * @param  classDefs - the classDefs in the diagram text. Might be null if none were defined. Usually is the result of a call to getClasses(...)\n * @returns  the string with all the user styles\n */\nexport const createCssStyles = (\n  config: MermaidConfig,\n  classDefs: Map<string, DiagramStyleClassDef> | null | undefined = new Map()\n): string => {\n  let cssStyles = '';\n\n  // user provided theme CSS info\n  // If you add more configuration driven data into the user styles make sure that the value is\n  // sanitized by the sanitize CSS function TODO where is this method?  what should be used to replace it?  refactor so that it's always sanitized\n  if (config.themeCSS !== undefined) {\n    cssStyles += `\\n${config.themeCSS}`;\n  }\n\n  if (config.fontFamily !== undefined) {\n    cssStyles += `\\n:root { --mermaid-font-family: ${config.fontFamily}}`;\n  }\n  if (config.altFontFamily !== undefined) {\n    cssStyles += `\\n:root { --mermaid-alt-font-family: ${config.altFontFamily}}`;\n  }\n\n  // classDefs defined in the diagram text\n  if (classDefs instanceof Map) {\n    const htmlLabels = config.htmlLabels ?? config.flowchart?.htmlLabels; // TODO why specifically check the Flowchart diagram config?\n\n    const cssHtmlElements = ['> *', 'span']; // TODO make a constant\n    const cssShapeElements = ['rect', 'polygon', 'ellipse', 'circle', 'path']; // TODO make a constant\n\n    const cssElements = htmlLabels ? cssHtmlElements : cssShapeElements;\n\n    // create the CSS styles needed for each styleClass definition and css element\n    classDefs.forEach((styleClassDef) => {\n      // create the css styles for each cssElement and the styles (only if there are styles)\n      if (!isEmpty(styleClassDef.styles)) {\n        cssElements.forEach((cssElement) => {\n          cssStyles += cssImportantStyles(styleClassDef.id, cssElement, styleClassDef.styles);\n        });\n      }\n      // create the css styles for the tspan element and the text styles (only if there are textStyles)\n      if (!isEmpty(styleClassDef.textStyles)) {\n        cssStyles += cssImportantStyles(\n          styleClassDef.id,\n          'tspan',\n          (styleClassDef?.textStyles || []).map((s) => s.replace('color', 'fill'))\n        );\n      }\n    });\n  }\n  return cssStyles;\n};\n\nexport const createUserStyles = (\n  config: MermaidConfig,\n  graphType: string,\n  classDefs: Map<string, DiagramStyleClassDef> | undefined,\n  svgId: string\n): string => {\n  const userCSSstyles = createCssStyles(config, classDefs);\n  const allStyles = getStyles(graphType, userCSSstyles, config.themeVariables);\n\n  // Now turn all of the styles into a (compiled) string that starts with the id\n  // use the stylis library to compile the css, turn the results into a valid CSS string (serialize(...., stringify))\n  // @see https://github.com/thysultan/stylis\n  return serialize(compile(`${svgId}{${allStyles}}`), stringify);\n};\n\n/**\n * Clean up svgCode. Do replacements needed\n *\n * @param svgCode - the code to clean up\n * @param inSandboxMode - security level\n * @param useArrowMarkerUrls - should arrow marker's use full urls? (vs. just the anchors)\n * @returns the cleaned up svgCode\n */\nexport const cleanUpSvgCode = (\n  svgCode = '',\n  inSandboxMode: boolean,\n  useArrowMarkerUrls: boolean\n): string => {\n  let cleanedUpSvg = svgCode;\n\n  // Replace marker-end urls with just the # anchor (remove the preceding part of the URL)\n  if (!useArrowMarkerUrls && !inSandboxMode) {\n    cleanedUpSvg = cleanedUpSvg.replace(\n      /marker-end=\"url\\([\\d+./:=?A-Za-z-]*?#/g,\n      'marker-end=\"url(#'\n    );\n  }\n\n  cleanedUpSvg = decodeEntities(cleanedUpSvg);\n\n  // replace old br tags with newer style\n  cleanedUpSvg = cleanedUpSvg.replace(/<br>/g, '<br/>');\n\n  return cleanedUpSvg;\n};\n\n/**\n * Put the svgCode into an iFrame. Return the iFrame code\n *\n * @param svgCode - the svg code to put inside the iFrame\n * @param svgElement - the d3 node that has the current svgElement so we can get the height from it\n * @returns  - the code with the iFrame that now contains the svgCode\n */\nexport const putIntoIFrame = (svgCode = '', svgElement?: D3Element): string => {\n  const height = svgElement?.viewBox?.baseVal?.height\n    ? svgElement.viewBox.baseVal.height + 'px'\n    : IFRAME_HEIGHT;\n  const base64encodedSrc = toBase64(`<body style=\"${IFRAME_BODY_STYLE}\">${svgCode}</body>`);\n  return `<iframe style=\"width:${IFRAME_WIDTH};height:${height};${IFRAME_STYLES}\" src=\"data:text/html;charset=UTF-8;base64,${base64encodedSrc}\" sandbox=\"${IFRAME_SANDBOX_OPTS}\">\n  ${IFRAME_NOT_SUPPORTED_MSG}\n</iframe>`;\n};\n\n/**\n * Append an enclosing div, then svg, then g (group) to the d3 parentRoot. Set attributes.\n * Only set the style attribute on the enclosing div if divStyle is given.\n * Only set the xmlns:xlink attribute on svg if svgXlink is given.\n * Return the last node appended\n *\n * @param parentRoot - the d3 node to append things to\n * @param id - the value to set the id attr to\n * @param enclosingDivId - the id to set the enclosing div to\n * @param divStyle - if given, the style to set the enclosing div to\n * @param svgXlink - if given, the link to set the new svg element to\n * @returns - returns the parentRoot that had nodes appended\n */\nexport const appendDivSvgG = (\n  parentRoot: D3Element,\n  id: string,\n  enclosingDivId: string,\n  divStyle?: string,\n  svgXlink?: string\n): D3Element => {\n  const enclosingDiv = parentRoot.append('div');\n  enclosingDiv.attr('id', enclosingDivId);\n  if (divStyle) {\n    enclosingDiv.attr('style', divStyle);\n  }\n\n  const svgNode = enclosingDiv\n    .append('svg')\n    .attr('id', id)\n    .attr('width', '100%')\n    .attr('xmlns', XMLNS_SVG_STD);\n  if (svgXlink) {\n    svgNode.attr('xmlns:xlink', svgXlink);\n  }\n\n  svgNode.append('g');\n  return parentRoot;\n};\n\n/**\n * Append an iFrame node to the given parentNode and set the id, style, and 'sandbox' attributes\n *  Return the appended iframe d3 node\n *\n * @param parentNode - the d3 node to append the iFrame node to\n * @param iFrameId - id to use for the iFrame\n * @returns the appended iframe d3 node\n */\nfunction sandboxedIframe(parentNode: D3Element, iFrameId: string): D3Element {\n  return parentNode\n    .append('iframe')\n    .attr('id', iFrameId)\n    .attr('style', 'width: 100%; height: 100%;')\n    .attr('sandbox', '');