Syntax Error in Graph / Mermaid Version 9.0.1

[stevexm]

Describe the bug
Unable to render graphs: erDiagram, gantt when integrating Mermaid with Ionic/StencilJS. Some other graphs all render perfectly.

To Reproduce
Code used to initialize and render a graph, works perfectly for a graph, and sequenceDiagram:

  componentDidLoad() {
    const { insertSvg } = this;
    const erd = `
         erDiagram
           title This is a title
           accDescription Test a description
           CUSTOMER ||--o{ ORDER : places
           ORDER ||--|{ LINE-ITEM : contains
           CUSTOMER }|..|{ DELIVERY-ADDRESS : uses   
    `;
    debugger;
    //get the mermaid div
    this.mermaidElement = document.getElementById("mermaid");
    //initialize with a 'standard' config
    mermaidAPI.initialize({
      theme: "forest",
      // themeCSS: '.node rect { fill: red; }',
      logLevel: 3,
      securityLevel: "antiscript",
      flowchart: { curve: "basis" },
      gantt: { axisFormat: "%m/%d/%Y" },
      sequence: { actorMargin: 50 },
      // sequenceDiagram: { actorMargin: 300 } // deprecated
    });
    //now render
    mermaidAPI.render(
      "theGraph",
      erd,
      insertSvg.bind(this),
      this.mermaidElement
    );
  }
  //test of function binding
  callback(id:string = 'anon') {
    debugger;
  }
  insertSvg(svgCode) {
    const { mermaidElement, callback } = this;
    const id = "mermaid";
    debugger;
    mermaidElement.innerHTML = svgCode;
    if (typeof callback !== "undefined") {
      callback(id);
    }
    // bindFunctions(mermaidElement);
  }

Expected behavior
ERD and gantt to render as with Mermaid-live

Screenshots

Code Sample
This is what I expect to see, but Mermaid render is throwing a parse fail exception: Live Editor Link, that works

Desktop (please complete the following information):

• OS: osx 11.6
• Browser: Chrome
• Version 100.0.4896.127 (Official Build) (x86_64)

Additional context
Apologies for missing something obvious, just starting out with Mermaid (which is great).

[stevexm]

OK, figured my "error" out. If a erDiagram 'markdown' leads with a newline character, the Mermaid parser does not seem to be able to handle that case (and simply ignore it instead of throwing a parse exception). When I changed the string to leave out any leading/trailing newlines, like so:

const erd = `erDiagram
title This is a title
accDescription Test a description
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses`;

Then Mermaid renders everything beautifully:

Maybe a note in the documentation, if such is not already present? Am closing the issue now.

Thanks again for a wonderful library!

[yuis-ice]

I have the freaking same problem.