How to use the mermaid.parse function in mermaid

To help you get started, we’ve selected a few mermaid examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github mermaidjs / mermaid-live-editor / src / components / Preview.js View on Github external
initMermaid () {
    const {
      code,
      history,
      match: { url }
    } = this.props
    try {
      mermaid.parse(code)
      // Replacing special characters '<' and '>' with encoded '<' and '>'
      let _code = code
      _code = _code.replace(//g, '>')
      // Overriding the innerHTML with the updated code string
      this.container.innerHTML = _code
      mermaid.init(undefined, this.container)
    } catch (e) {
      // {str, hash}
      const base64 = Base64.encodeURI(e.str || e.message)
      history.push(`${url}/error/${base64}`)
    }
  }
github WeBankPartners / wecube-platform / wecube-portal / src / pages / components / sequence-diagram.vue View on Github external
`${_.unit_design.key_name.replace(
              /-/g,
              "&"
            )}->>${_.service_design.key_name
              .replace(`-${_.service_design.code}`, "")
              .replace(/-/g, "&")}:${index + 1} : ${
              _.description.length === 0 ? "" : _.description
            }`
          );
        });
        this.graphString = graphNode.toString().replace(/,/g, " \n");
      }
      const element = document.querySelector(`#abc${this.guid}`);
      element.removeAttribute("data-processed");
      element.innerHTML = this.graphString;
      mermaid.parse(this.graphString);
      mermaid.init(undefined, element);
      this.$nextTick(() => {
        this.replaceSvgContentHandler();
      });
    },
    replaceSvgContentHandler() {
github WeBankPartners / we-cmdb / cmdb-ui / src / pages / components / sequence-diagram.vue View on Github external
`${_.unit_design.key_name.replace(
              /-/g,
              "&"
            )}->>${_.service_design.key_name
              .replace(`-${_.service_design.code}`, "")
              .replace(/-/g, "&")}:${index + 1} : ${
              _.description.length === 0 ? "" : _.description
            }`
          );
        });
        this.graphString = graphNode.toString().replace(/,/g, " \n");
      }
      const element = document.querySelector(`#abc${this.guid}`);
      element.removeAttribute("data-processed");
      element.innerHTML = this.graphString;
      mermaid.parse(this.graphString);
      mermaid.init(undefined, element);
      this.$nextTick(() => {
        this.replaceSvgContentHandler();
      });
    },
    replaceSvgContentHandler() {