I'm using v0.10.0 version of VSCode extension.

When I try to create a graph the node shapes is misaligned how this image can demonstrate:

The size of the node shape is larger than necessary too.

I'm using default settings, Linux Ubuntu 20.04 and VSCode 1.54.3

This is an idea from the vscode-drawio, I think it is a great feature, the following is an example of use

Just for your reference

I think the way to implement this feature may be to store the diagram information in a image file.

Maybe related to these codes

Thank you for bringing such a good plugin to the vscode.

Is there a way to associate mermaid configuration and/or stylesheet with a mmd file for display or export?

Describe the bug
The follow mermaid diagram code doesn't render i.e. just produces a white screen in the preview

gitGraph
  commit
  commit
  commit

gitGraph
  commit
  commit
  commit

To Reproduce
Steps to reproduce the behavior:
1.Install extension
2. Add file with .mmd extension
3. Add the above code to file
4. Select F1 and then Mermaid: Preview diagram
5. See bank preview window

Expected behavior
Expected git graph to be displayed.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: Windows 10 Pro
• VSCode version: 1.69.2
• Extension version: v0.14.0

Additional context

When a dark theme is set for VSCode, the default text color for the mermaid preview is not visible.

Example

sequenceDiagram

    participant Test1;
    participant Test2;

    loop: comment
        Note over Test1: This is a test
    end

It looks like a simple solution would be to explicitly set the default background color for the preview.

PS: I see mermaid-editor.preview.backgroundColor can be set. May be the default should be white.

Hi, I'm having some trouble setting up configs. All I was trying is to setup the output path for images, and change the type to png, but I can't seem to figure out the correct place/syntax.

diagram.mmd

sequenceDiagram
%% @config{./mmd.json}
    Alice->>John: Hello John, how are you?

mmd.json

{
  "theme": "default",
  "type": "png",
  "mermaid-editor": {
    "generate": {
      "type": "png",
      "outputPath": "./images/"
    }
  },
  "outputPath": "./images/"
}

E.g., the following works in mermaid live editor, but not when I used it in the plugin. Having the <<interface>> would prevent the whole diagram from rendering. If I remove that, the * for marking a method virtual still has no effect in the plugin.

The Gantt chart I created can be previewed correctly, both in this VS Code plugin and in other mermaid tools. However, whenever I try to export/generate the graph, it gives the following errors:

Parse error on line 1:
#mermaid-16011334473
^
Expecting 'NEWLINE', 'SPACE', 'GRAPH', got 'BRKT'

Describe the bug
Direction in subgraphs is not working.
It actually not a bug, but a reference to an older version of mermaid (8.9.2), where this feature is not supported. From version 8.10.2 the feature is supported.

To Reproduce
flowchart LR
subgraph TOP
direction TB
subgraph B1
direction RL
i1 -->f1
end
subgraph B2
direction BT
i2 -->f2
end
end
A --> TOP --> B
B1 --> B2

Cutting and pasting the ER diagram example from mermaid-js.github.io/mermaid-live-editor results in syntax errors being reported. The live preview diagram is generated correctly however.

The syntax errors appear as follows:

Parse error on line 1:

^
Expecting 'NEWLINE', 'SPACE', 'GRAPH', got 'EOF'

============================

Describe the bug
If you try to use a fontawesome icon like fa:fa-phone, it's displayed in the preview but disappear from generated image.

To Reproduce
Steps to reproduce the behavior:

1. Create a test.mmd in vscode.

graph LR
test[fa:fa-phone <- Phone]

2. See that preview display the phone icon
3. Generate image and see that phone icon is missing.

Expected behavior
Fontawesome icons should be generated as well.

Screenshots

Desktop (please complete the following information):

• OS: Win 10 20 H2
• VSCode version 1.55.2
• Extension version 0.11

I'm on v0.8.1, and I'm having trouble with just a few of the arrow and line types in flowcharts:

It appears that the live previewer chokes on the %%{. I think it is not considering it a comment line because the curly bracket is touching the %%.
This stops the previewer from updating.
The preview does work with that syntax though. I just have to close the preview and re-open to get updates.

Hi there,

thank you very much for your work, the extension is great!

I'm currently having a problem:
When I zoom-out the graph preview, letters are dissapearing/trimmed; this applies to exporting too.
Pictures attached.
Any ideas on how to fix that?

Thanks a lot,
Thomas

Is is possible to adjust the image quality/dpi on jpg, the output images are sometimes really poor.

Version 0.10.0

Try with a sample from the docs, like this:

erDiagram
    CAR ||--o{ NAMED-DRIVER : allows
    CAR {
        string registrationNumber
        string make
        string model
    }
    PERSON ||--o{ NAMED-DRIVER : is
    PERSON {
        string firstName
        string lastName
        int age
    }

It doesn't show the diagram, but if I save the file I get this in terminal:

[DigagramParseError]
Parse error on line 3:
...R : allows
    CAR (
        string re
----------------------^
Expecting ':', 'ZERO_OR_ONE', 'ZERO_OR_MORE', 'ONE_OR_MORE', 'ONLY_ONE', got '('

(Yes, there's a typo in the exception name)

Describe the bug
It looks like, the plugin ignores the "mermaid-editor.preview.defaultMermaidConfig" setting when restarted. We need to make a small change to the settings file to reload the setting value.

To Reproduce
Steps to reproduce the behavior:

1. Go to 'settings.json'
2. Scroll down to 'mermaid-editor.preview.defaultMermaidConfig'
3. Set the value to point to a mermaid-js.json file. { "theme": "forest"}
4. Check if its working fine, it should apply the forest theme.
5. Restart vscode.
6. Check if the mmd is still rendering with forest theme. it won't.
7. make a small change to the settings file, save it and change it back to what it should be
8. Check if its working fine, it should apply the forest theme.

Expected behavior
To persist the config changes.

Screenshots
let me know if you want me to record this.

Desktop (please complete the following information):

• OS: [e.g. Windows 10]
• VSCode 1.63.0
• Extension version: v0.11.4

Additional context
Add any other context about the problem here.

The mermaid live editor is using the monaco library and contains a definition for the mermaid language: https://github.com/mermaid-js/mermaid-live-editor/tree/master/src/mermaid-language

Since it's based on the same editor engine, is it possible to incorporate this for syntax highlighting?

Hi,

I would like to use this extension at my place of work but I would rather not have sensitive information be uploaded to any external 3rd parties. Does this extension render all the diagrams locally or is the diagram rendered on some remote server and retrieved?

If the rendering is done fully local, you should definitely mention this feature in the readme, I can imagine many developers are facing restrictions on what external / cloud tools they're allowed to use.

Thank you!

Hello!

First off, thanks for creating this, the preview is excellent and works really well.

However, I'm having some issues with the syntax highlighting. For most of my diagrams, it highlights the opening sequenceDiagram but very little else. Are there any known issues there?

Is there a way for global (user or system level) configuration? just like .eslintrc, such as

• ~/.mermaid/config.json in linux
• %userprofile%\.mermaid\config.json in windows

it's great to set mermaid-editor.preview.defaultMermaidConfig , but it does not support absolute path. I hope it can.

Can you please support latest mermaid version 8.4.

There is a new diagram type: state diagrams
https://mermaidjs.github.io/#/stateDiagram

Thank you very much!
Kind regards,
Jan

I would like to increase the fontsize, and i'm new to mermaid...
Is it possible to include a css-style sheet?

Describe the bug
Using Mindmaps does not appear to be working.
Copying and pasting the example from https://mermaid-js.github.io/mermaid/#/mindmap gives

[DigagramParseError]
undefined

in the output pane, and no graph is generated, instead a Mermaid error message "Syntax error in graph" is shown in the preview pane.

This same graph works properly at the Mermaid Live editor at https://mermaid.live/

To Reproduce

1. Open a new .mmd file
2. Paste in the example text from https://mermaid-js.github.io/mermaid/#/mindmap
3. Save file
4. See error

Expected behavior
Graph is displayed properly as at https://mermaid.live/

Screenshots

Desktop:

• OS: Ubuntu 20.04.5
• VSCode 1.73.0
• Extension [email protected]

With the Mermaid live editor, it works. However, with this plugin, it does not work. When searching within the issues, it should work in version 0.8.1?

Describe the bug
Scaling doesn't work. It always shows a small image, I assume as 1.0.

To Reproduce
I used "mermaid-editor.generate.scale": 2.0.

Expected behavior
An image twice as large.

Screenshots
n/a

Desktop (please complete the following information):

• OS: ubuntu
• VSCode version 1.60.0
• Extension version 0.11.2

Additional context
n/a

Describe the bug
The extension isn't activated on mermaid language detection.

To Reproduce
Steps to reproduce the behavior:

1. Create a new untitled file in VSCode, do not save it
2. Write some mermaid code

graph TD
  X[Hello]

3. Make sure that the correct language is detected
4. Open the Command Pallet and search for "mermaid" -> nothing appears
5. Look at the top right of the document window -> no preview icon is visible

Expected behavior
Previewing should work on untitled files.

Desktop (please complete the following information):

• OS: Windows 10
• VSCode 1.7
• Extension version 0.15.0

Additional context
bpruitt-goddard.mermaid-markdown-syntax-highlighting 1.4.0 is also enabled

Hello,

It seems that I'm unable to set the theme to other than default from the mermaid config json.

- config.json
{
    "theme": "dark"
}

- mmd
sequenceDiagram
    %% @config{./config.json}
    %% @backgroundColor{black}
    .
    .
    .

The background is black, but the diagram is still using the default theme. The generated SVG also still uses the default theme.

I see from the package.json we are still using 9.4.0.
Is there an easy way to decouple the deployment of the extension with the version of mermaid that comes with the extension? With how the extension functions currently, you'll need to release a new version every time the mermaid lot release something new.

For instance, using v10 features is giving me syntax errors and I don't see an easy way for me to choose my mermaid version. I love the extension but this is a sure way to make sure it ends up out of date with mermaid.

V0.8.1 works, but after update to 0.9.0 and reload vscode, it doesn't seem to work anymore. Same for my colleagues.

When previewing a long graph, the scroll position is retested every time a change is made to the code and the preview is reloaded. It would be nice to preserve the scroll position so users don't need to scroll manually every time.

Hi,

I see that dependabot has an open PR to upgrade Mermaid to 8.13.8. How far away is the next version with this update? My diagrams renders ok in Mermaid Live (currently at v version 8.13.8), but vscode-mermaid-editor only reports syntax errors.

When generating the image from the mmd file, the svg is oversize and in both png and svg the text overflows the boxes in the themes default and natural

It would be very convenient if the Mermaid Editor supported a copy shortcut which generate an image and copied it into the clipboard. For many workflows this is faster and more convenient than saving a file to disk then copying it or uploading it elsewhere.

A great example of how copying images can be more convenient is when drawing images in VSCode and then wanting to post them in GitHub issue/PR comments. Doing so with the extension as is requires saving the file somewhere, then uploading it to GitHub in the comment. However, if the extension supported copying the image directly to clipboard, the user could paste directly into a GitHub comment box and GitHub will upload the image from the clipboard into the comment.

The Excalidraw extension is another diagram drawing extension for VSCode that offers this feature, and it makes getting images out of the extension very convenient. I use the workflow described above with it, and I think this extension would benefit from it.

When I change the generated image format to png, jpg or webp, nothing happens when using the generate image command. The file generates fine when the format is svg.

Love the plugin btw 😄

No export to image in VSC

• Preview is working
• then when trying Mermaid:Generate image
  error:

Command failed: mkdir -p c:\Users\tomaz\Documents\NetBeansProjects\GitLab_Arnes\portal-hub\arnes-guest-account\predal-wc\frontend
A subdirectory or file -p already exists.
Error occurred while processing: -p.
A subdirectory or file c:\Users\tomaz\Documents\NetBeansProjects\GitLab_Arnes\portal-hub\arnes-guest-account\predal-wc\frontend already exists.
Error occurred while processing: c:\Users\tomaz\Documents\NetBeansProjects\GitLab_Arnes\portal-hub\arnes-guest-account\predal-wc\frontend.

ENOENT: no such file or directory, open 

It would be great to be able to configure the settings to generate the png or svg image to be generated in the same path as the mmd file

Describe the bug
I'm using https://vscodium.com/ which in turn uses https://open-vsx.org/

Right now mermaid-editor isn't easily installable with that setup. Any chances of seeing this plugin in open-vsx ? Thanks in advance !

Desktop (please complete the following information):

• OS: Ubuntu
• VSCode version: VSCodium

Generate command fails with node_modules/.bin/mmdc: No such file or directory because .bin is not created under vscode extensions dir.

There is no way to add line break. In mermaid official live editor <br> works

Describe the bug
When opening a repository using GitHub Repositories plugin, where the code is not checked out to a repo, attempting to generate an image from a diagram results in this error:

Unable to write file '/leighmcculloch/diagrams/merging-shared-iteration-number-simple.svg' (Unknown (FileSystemError): Error: EROFS: read-only file system, mkdir '/leighmcculloch')

To Reproduce
Steps to reproduce the behavior:

1. Install GitHub Repositories: https://marketplace.visualstudio.com/items?itemName=GitHub.remotehub
2. Install Markdown Editor: https://marketplace.visualstudio.com/items?itemName=tomoyukim.vscode-mermaid-editor
3. Create a diagram, save it as an .mmd file.
4. Run the command Mermaid:Generate image

Expected behavior
Image would be generated in some form.

Screenshots
N/A

Desktop (please complete the following information):

• OS: macOS 11.6
• VSCode version: v1.60.2
• Extension version: v0.11.4

Additional context
N/A

I read the docs and a number of other issues, but can't find relevant info.

What must I do to enable dark mode?

I did this:

• added file path/to/config.json which contains: { "theme": "dark" }
• added to my settings: "mermaid-editor.preview.defaultMermaidConfig": "path/to/config.json"

That shows a class diagram with black classes, but on white background. Not really a "dark mode" theme.

What is the correct way to do this?

Describe the bug
Referencing #69 as template for the same concerns, but for a different type of diagram.

Using a new Sequence Diagram syntax that was introduced in mermaid v9.4.0 will break the preview.
Copying and pasting the example from https://mermaid.js.org/syntax/sequenceDiagram.html#grouping-box gives

[DigagramParseError]
undefined

I use this extension at work. Would be great to benefit by shipping the extension with a newer version of the library that supports the syntax.

To Reproduce
Steps to reproduce the behavior:

• Open a new .mmd file
• Paste in the example text from https://mermaid.js.org/syntax/sequenceDiagram.html#grouping-box
• Save file
• See error

Expected behavior
Graph is displayed properly as at https://mermaid.js.org/syntax/sequenceDiagram.html#grouping-box.

Note: Showing expected behavior https://mermaid.live/ is currently not possible. It's still running on v9.3.0 of the library.

Screenshots

Desktop (please complete the following information):
Doesn't really matter which OS and VSCode version. I have an older PC running macOS Mojave 10.14.6 and VS

• OS: macOS Ventura 13.2.1 (same issue with older PC on macOS Mojave 10.14.6)
• VSCode version: 1.75.1 (same issue with older PC on 1.74.2)
• Extension version: [email protected]

Right now the exported image size is set via mermaid-editor.generate.width and mermaid-editor.generate.height settings. But that is global to all mermaid documents. Small diagrams typically end up as small images in the top-left corner of the PNG.

Can you please add some form of dynamic sizing of the exported images? Ideally this would involve a simple scale-factor setting that, when set to 1, would render text as the correct font size. Exporting would then automatically calculate the bounds of the image based on that scale (perhaps we also need a dpi setting for image rendering).

Hi,

when I edit a file and there's an error, the output tab showing the error will automatically be opened on every keystroke.

I'm pretty sure this is caused by this plugin, as I normally don't see that behavior in any other circumstances.
For me, that's pretty annoying and that's probably not intended anyways so that should either be fixed or configurable I guess? :)

Not sure what changed exactly but suddenly the plugin is producing cut off images of diagrams as can be seen below. Without a change this was working ~2 weeks back.

Test .mmd file content (which rendered correctly in preview)
sequenceDiagram %% @backgroundColor{white} %% @outputScale{2.5} participant br as Browser participant fr as frontend participant ap as api participant ps as PostgreSQL participant pr as Prometheus participant ot as OpenTracing br->>fr: access Website activate fr fr-->>br: render Website fr->>ap: REST calls activate ap ap->>ps: query/update data activate ps ps-->>ap: return result deactivate ps opt In case of changed data ap-->>fr: update ap-xpr: dispatch logs ap-xot: dispatch tracing deactivate ap end fr-->>br: render update deactivate fr

generates this cut off picture:

Version:

• VSCode: 1.55.1
• vscode-mermaid-editor: 0.10.1

Describe the bug
gitGraph doesn't generate lines for branches when more than 8 branches

To Reproduce

gitGraph
    commit
    branch aaa
        commit
    branch sss
        commit
    branch ddd
        commit
    branch fff
        commit
    branch ggg
        commit
    branch hhh
        commit
    branch jjj
        commit
    branch kkk
        commit
    branch lll
        commit

Expected behavior

Screenshots / Actual behavior

Desktop (please complete the following information):

• OS: Windows 10
• VSCode version: 1.72.2
• Extension version: 0.15.0

An example mermaid file:

sequenceDiagram
    participant x as Aさん
    participant y as Bさん

    x ->> y: プレゼントを渡す

The preview works:

But not the generator:

Parse error on line 1:
#mermaid-16076197498
^
Expecting 'NEWLINE', 'SPACE', 'GRAPH', got 'BRKT'

============================

Changing all Japanese words to ascii letters makes the generator work properly.

Hi, I maintain VS Code's Webview API

Issue

Our telemetry suggests that your extension uses webviews and may be loading resources in these webviews using hardcoded vscode-resource: URIs. These URIs have some important limitations and don't work properly when VS Code is run in a browser. We are also making changes in the desktop version of VS Code that may cause these URIs to not work properly in future versions of VS Code.

While we are making our best effort to continue support existing webview extensions that use vscode-resource: URIs on desktop versions of VS Code, we will not able to fully support all uses cases.

Fix

To ensure that your extension continues to work in as many environments as possible—including on web and remotely—please:

• Switch to use the Webview.asWebviewUri function for loading resources.

• Switch to use the Webview.cspSource property in content security policies.

These APIs shipped around 2 years ago so they should be available in all modern versions of VS Code. You can find additional information about the issue here: microsoft/vscode#97962

Let me know if you have any questions about this change