vscode-mermaid-editor icon indicating copy to clipboard operation
vscode-mermaid-editor copied to clipboard

Syntax error with comments at the top of the diagram

Open Lockszmith-GH opened this issue 9 months ago • 0 comments

Describe the bug When comments are placed above the diagram type, a Syntax error appears. Workaround: Moving the comments below the diagram type (in the code below it's below flowchart), rendering is flawless.

To Reproduce Steps to reproduce the behavior:

  1. Create an .mmd file with the following code and save:
%% mermaid.js diagram, can be viewed with
%% VSCode Mermaid Editor extension (id: tomoyukim.vscode-mermaid-editor)
%% or
%% by pasting the content into https://mermaid.live editor
---
title: "Title"
---
%%{
    init: {
        "theme": "dark",
        "logLevel": "info",
        "flowchart": {
            "htmlLabels": true
        }
    }
}%%

flowchart TB
    start(["Start"])
    --> block["Some Block"]
    --> done(["End"])
  1. Open Mermaid:Preview diagram
  2. Get the error:

    Syntax error in text mermaid version 10.3.0

Expected behavior Have it render just like in mermaid.live or here in GitHub:

%% mermaid.js diagram, can be viewed with
%% VSCode Mermaid Editor extension (id: tomoyukim.vscode-mermaid-editor)
%% or
%% by pasting the content into https://mermaid.live editor
---
title: "Title"
---
%%{
    init: {
        "theme": "dark",
        "logLevel": "info",
        "flowchart": {
            "htmlLabels": true
        }
    }
}%%

flowchart TB
    start(["Start"])
    --> block["Some Block"]
    --> done(["End"])

Desktop (please complete the following information):

  • OS: Microsoft Windows 11 Enterprise 10.0.22621 Build 22621
  • VSCode version: 1.89.1 (system setup) (Commit: dc96b837cf6bb4af9cd736aa3af08cf8279f7685)
  • Extension version: 0.19.1

Lockszmith-GH avatar May 23 '24 21:05 Lockszmith-GH