mermaid-chart/vscode-mermaid-preview

Previews Mermaid diagrams

Mermaid diagram previewer for Visual Studio Code

The plugin enables live editing and visualization of mermaid supported diagrams.

Related plugins:

• syntax highlighting

Usage

0. Open a file containing Mermaid diagram
1. Choose Preview Mermaid Diagram
2. Move cursor inside the diagram

Supported formats

The plugin detects mermaid diagrams in the following formats:

HTML tag

<div class="mermaid">sequenceDiagram A-->B: Works!</div>

Markdown fenced code

```mermaid
sequenceDiagram
  A-->B: Works!
```

HUGO shortcodes

{{<mermaid attr="val">}} sequenceDiagram A-->B: Works! {{</mermaid>}}

Sphinx directives

.. mermaid:: :parameters: are optional sequenceDiagram A-->B: Works!

The plugin does not preview diagrams in external files:

.. mermaid:: graphs/mygraph.mmd

Standalone Mermaid files

Files with extension .mmd with plain Mermaid diagram content:

sequenceDiagram
  A-->B: Works!

FontAwesome support

The plugin aims to be on par with the Mermaid Live Editor on handling Font Awesome icons.

Minimap

Enabling/disabling minimap rendering is controlled with the minimap setting.

Customize diagrams

Rendering

You can customize the appearance of the previewed diagrams by setting the mermaid configuration in the workspace settings:

{
  "mermaid": {
    "sequenceDiagram": {
      "mirrorActors": false
    }
  }
}

All mermaid configuration options are supported.

Theme handling

Default values

Based on the theme used in Visual Studio Code, the plugin default themes are: forest for light and dark for dark. These values can be changed with the following settings:

{
  "mermaid.vscode.light": "one of default, forest, neutral, dark",
  "mermaid.vscode.dark": "one of default, forest, neutral, dark"
}

Overriding automatic light/dark selection

Automatic theme selection can be changed with the following setting:

{
  "mermaid.theme": "one of default, forest, neutral, dark"
}

Custom theme

You can render the diagram using a custom theme by providing the following configuration properties:

{
  "mermaid.theme": null,
  "mermaid.themeCSS": "the theme as string"
}

⚠️ The value null for theme disables the automatic theme detection, so you are responsible for providing a proper theme in themeCSS for all diagrams used in the settings' scope.

vscode-mermaid-preview's Issues

An in-range update of vscode is breaking the build 🚨

Version 1.1.10 of vscode was just published.

Branch	Build failing 🚨
Dependency	vscode
Current Version	1.1.9
Type	devDependency

This version is covered by your current version range and after updating it in your project the build failed.

vscode is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

• ❌ continuous-integration/travis-ci/push The Travis CI build failed Details

---

Commits

The new version differs by 3 commits.

• 6d263fd bump to 1.1.10
• 1fa217d Merge pull request #89 from guw/master
• f24a59f Allow testing against latest Insiders app

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

Better UX for wide diagrams

Wide diagrams are scaled down in a way that makes reading the text hard.

With version 0.8.0 I've tried to add pan and zooming support to address this problem. The library included in that release was svg-pan-zoom, which had some side effects related to scaling on retina displays, so I had to revert. Version 0.8.1, removed the pan and zoom feature and allowed the flowcharts to use as wide area as they need. Version 0.8.2 added a minimap that renders in the upper left corner a smaller version of the diagram.

(panzoom seems to integrate better with mermaid but there are still issues related to integrating it with the previewHTML component of vscode.)

I would appreciate ideas to improve this situation.

Text overflows on mermaid graphs

Expected behaviour

graph LR
D(Dispatcher)-->S1(Saga)
D(Dispatcher)-->R(Reducer)
S1(Saga)-->G(Generator)
R(Reducer)-->S2(Store)
G(Generator)-->R(Reducer)

Actual behaviour

customizing link style with any color sets `fill` property to `black` instead of `none`

example code

graph TB;
    A-->B;
    linkStyle 0 stroke:red;
    B-->C;
    C-->A;

see #13, my second post for a screenshot

An in-range update of vscode is breaking the build 🚨

Version 1.1.8 of vscode was just published.

Branch	Build failing 🚨
Dependency	vscode
Current Version	1.1.7
Type	devDependency

This version is covered by your current version range and after updating it in your project the build failed.

vscode is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

• ❌ continuous-integration/travis-ci/push The Travis CI build failed Details

---

Commits

The new version differs by 3 commits.

• ab5b2e8 bump to 1.1.8
• d425fd3 Merge pull request #87 from Microsoft/roblou/fixRgPerms
• 82d33da chmod 755 rg - fix Microsoft/vscode#38406

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

An in-range update of vscode is breaking the build 🚨

The devDependency vscode was updated from 1.1.29 to 1.1.30.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

vscode is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

• ❌ continuous-integration/travis-ci/push: The Travis CI build failed (Details).

---

Commits

The new version differs by 2 commits.

• e81d78a [email protected]
• 4f6e30d Support passing user-data-dir to tests (#144)

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

Mermaid custom settings survey

There have been reports of custom settings not being properly applied (#55).

The plugin loads the configuration under key mermaid defined under both user and workspace settings, and passes it to mermaid.initialize. However, what goes further under this key feels more like uncharted territory (mermaid docs are in flux).

Please comment with working custom configuration and a screenshot of the result. If someone can confirm that the configurations in comments are working, please add reactions to the respective comment.

The aim is to document working configurations in the plugin manifest so that vscode does not report Unknown configuration setting.

how to config ,giving a sample.

how to config ,giving a sample.

Allow applying custom themes.

It would be great if this extension would allow applying custom themes as suggested in this post. My aim is to have a similar appearance in vscode like the graph I created in the online editor.

If I understand these lines correctly, the configuration is loaded but unfortunately the fields "theme" and "themeCSS" are overriden. To keep flexibility I would like to suggest to only override these settings if they are not present in the previously loaded config.

Minimap overlaps diagram

Expected behaviour

Minimap should not overlap diagram.

graph TD
  A[Foo]
  A-->B[Bar]

Actual behaviour

Minimap overlaps diagram.

• Preview mode: Mermaid
• Theme used: light

Preview not compatible with dark themes

Preview is not compatible with dark themes of VS Code. Arrows and texts should be in white on dark background.

See screenshot below:

Convert markdown to pdf

When using "Convert Markdown to pdf" the memaid schema used are not rendered. Only the memaid text content is shown in the pdf.

Loop text hard to read on dark background

Expected behaviour

[Every Minute] should use a light font

sequenceDiagram
    participant One
    participant Two
    loop Every minute
    One ->> Two: Hello
    end

Actual behaviour

Include:

• Screenshot
• Preview mode: Mermaid
• Theme used: dark

Plugin disables mermaid highlighting in mmd files

It seems that the plugin disables the syntax highlighting when diagrams are in separate files.

When the Preview extension is disabled, the syntax highlight works

When the Preview extension is enabled, the syntax highlight is gone

Regards!

Originally posted by @ppseprus in #54 (comment)

Travis fails to run the tests

The default ubuntu image used by Travis times-out before running the tests.

Tests are running fine locally.

Unable to make it work in vs code version 1.7.2

Hi

I might be missing something, but it does not work for me:

1. created a file .md, & .mmd, & .mermaide

with the following content:

```mermaid
sequenceDiagram
  A-->B: Works!

[request] Add label support for alt and loop

It would be nice to have cases and loops show the name provided in the source.

arrowhead hardly visible with dark themes

The arrow-head with its dark gray for dark themes is not very legible. The color code gray should be more legible.

for a screenshot, see my second last post from #13

Preview Mermaid Diagram from .mmd fails

Expected behavior

sequenceDiagram
  participant A as Azure Application
  participant E as ESB
  Note left of A: User session <br> established
  A->>E: Request REST endpoint
  A-->>E: Provide Basic Auth Token
  E->>E: Check token against DHSS AD
  E->>A: Return JSON payload
  Note right of E: Channel between <br> Azure and ESB <br> secured with Basic <br> Auth over TLS

I save a Mermaid diagram as a .mmd file. When I try to Review Mermaid Diagram I see the preview

Actual behavior

I save Mermaid diagram a .mmd file. When I try to Review Mermaid Diagram I get and error command 'extension.previewMermaidDiagram' not found. Preview works fine for the same diagram when embedded in a markdown diagram.

Include:

• Screenshot:
  • 
  • 
• Preview mode: Mermaid
• Theme used: dark

An in-range update of vscode is breaking the build 🚨

The devDependency vscode was updated from 1.1.28 to 1.1.29.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

vscode is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

• ❌ continuous-integration/travis-ci/push: The Travis CI build failed (Details).

---

Commits

The new version differs by 2 commits.

• ea86293 [email protected]
• aafb824 disable other extensions in testing (#142)

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

Arrowheads not showing in diagrams

I copied the sample diagram from your README but the arrowheads are not showing. My environment:

• Windows 7 64-bit
• VS Code v1.1.1

links apparently not sufficiently styled by default for `graph`

The following code in vscode version 1.7.1 (Mac OS X Sierra) does not draw the links but only the arrows of the links

    ```mermaid
    graph TB;
        A-->B;
        B-->C;
        C-->A;
    ```

It does not matter which color theme is chosen in vscode. It appears to be due to a lack of (default) styling of the links, i.e. probably stroke set to none or something like that.

Add link to mermaid documentation

Expected behaviour

Readme or home page should contain a link to mermaid docs.

Actual behaviour

Currently there are no links.

& thanks for the wonderful extension.

Add support for mermaid diagrams embedded in sphinx docs

sphinxcontrib-mermaid is a plugin for Sphinx docs which uses ReStructuredText (ReST) syntax.

The mermaid identified code block syntax for ReST (equivalent of the fenced and identified code blocks in Markdown) is:

.. mermaid::

   sequenceDiagram
      participant Alice
      participant Bob
      Alice->John: Hello John, how are you?
      loop Healthcheck
          John->John: Fight against hypochondria
      end
      Note right of John: Rational thoughts <br/>prevail...
      John-->Alice: Great!
      John->Bob: How about you?
      Bob-->John: Jolly good!

That is: an indented block of text preceded by an unidented .. mermaid:: code block tag.

It would be nice if this format could be detected for preview, as an aide for writing Sphinx docs with mermaid graphs in VS.Code

command 'extension.previewMermaidDiagram' not found

Issue foundation:

1. I use vscode
2. I clone the whole repo of this

When I type:

>mermaid*

Happen this issue :

command 'extension.previewMermaidDiagram' not found

---

Hope your help.

Version 10 of node.js has been released

Version 10 of Node.js (code name Dubnium) has been released! 🎊

To see what happens to your code in Node.js 10, Greenkeeper has created a branch with the following changes:

• Added the new Node.js version to your .travis.yml

If you’re interested in upgrading this repo to Node.js 10, you can open a PR with these changes. Please note that this issue is just intended as a friendly reminder and the PR as a possible starting point for getting your code running on Node.js 10.

More information on this issue

Greenkeeper has checked the engines key in any package.json file, the .nvmrc file, and the .travis.yml file, if present.

• engines was only updated if it defined a single version, not a range.
• .nvmrc was updated to Node.js 10
• .travis.yml was only changed if there was a root-level node_js that didn’t already include Node.js 10, such as node or lts/*. In this case, the new version was appended to the list. We didn’t touch job or matrix configurations because these tend to be quite specific and complex, and it’s difficult to infer what the intentions were.

For many simpler .travis.yml configurations, this PR should suffice as-is, but depending on what you’re doing it may require additional work or may not be applicable at all. We’re also aware that you may have good reasons to not update to Node.js 10, which is why this was sent as an issue and not a pull request. Feel free to delete it without comment, I’m a humble robot and won’t feel rejected 🤖

---

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

An in-range update of vscode is breaking the build 🚨

The devDependency vscode was updated from 1.1.33 to 1.1.34.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

vscode is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

• ❌ continuous-integration/travis-ci/push: The Travis CI build failed (Details).

---

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

An in-range update of mermaid is breaking the build 🚨

Version 7.0.10 of mermaid just got published.

Branch	Build failing 🚨
Dependency	mermaid
Current Version	7.0.9
Type	dependency

This version is covered by your current version range and after updating it in your project the build failed.

mermaid is a direct dependency of this project this is very likely breaking your project right now. If other packages depend on you it’s very likely also breaking them.
I recommend you give this issue a very high priority. I’m sure you can resolve this 💪

Status Details

• ❌ continuous-integration/travis-ci/push The Travis CI build could not complete due to an error Details

---

Commits

The new version differs by commits.

See the full diff

Not sure how things should work exactly?

There is a collection of frequently asked questions and of course you may always ask my humans.

---

Your Greenkeeper Bot 🌴

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because we are using your CI build statuses to figure out when to notify you about breaking changes.

Since we did not receive a CI status on the greenkeeper/initial branch, we assume that you still need to configure it.

If you have already set up a CI for this repository, you might need to check your configuration. Make sure it will run on all new branches. If you don’t want it to run on every branch, you can whitelist branches starting with greenkeeper/.

We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

Once you have installed CI on this repository, you’ll need to re-trigger Greenkeeper’s initial Pull Request. To do this, please delete the greenkeeper/initial branch in this repository, and then remove and re-add this repository to the Greenkeeper integration’s white list on Github. You'll find this list on your repo or organiszation’s settings page, under Installed GitHub Apps.

Support for awesome

I like to style my graphs with icons from font-awesome. https://knsv.github.io/mermaid/#basic-support-for-fontawesome

Previewing fontawesome in VSCode would be awesome. ;-)

Export not working (or not sure)

Expected behaviour

1. Run mermaid export
2. see my file, or ... something.

Actual behaviour

1. Run mermaid export (cmd-ctrl-p)
2. [nothing happens]

Where does it export to? Assuming cwd, it is not working. No log messages (despite checking mermaid export debug" in settings).

I searched issues, and this project's readme (doesn't contain the word "export"). Possibly related to #57 (in that I don't seem to have a working config).

Flickering and scroll bar stepping

Expected behaviour

No flickering, and no scroll position change.

Reproduce

To reproduce (doesn't matter what diagram) I just open any markdown in preview mode and type a space anywhere, every other space or so the result is somewhat different and the scroll position will move up 1 line.

Actual behaviour

The diagram is rendered with different colors depending on whether the file is fully saved to disk or not when looking at the markdown preview. It's also switches between different colors as I'm typing. The scroll position moves up 1 line when this happens.

I'm using the Monokai Pro Dark Theme, might be an issue here. I also have a custom editor style on top of this.

{
  "editor.tokenColorCustomizations": {
    "textMateRules": [
      {
        "scope": ["comment"],
        "settings": {
          "fontStyle": ""
        }
      }
    ]
  }
}

Edit:

This is a minor inconvenience, all in all, I really like the extension.

Warning due to vscode.previewHtml deprecation

Using Preview Mermaid Diagram triggers a deprecation warning,

Extension 'vstirbu.vscode-mermaid-preview' uses the 'vscode.previewHtml' command which is deprecated and will be removed soon. Please file an issue against this extension to update to use VS Code's webview API.

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because we are using your CI build statuses to figure out when to notify you about breaking changes.

Since we did not receive a CI status on the greenkeeper/initial branch, we assume that you still need to configure it.

If you have already set up a CI for this repository, you might need to check your configuration. Make sure it will run on all new branches. If you don’t want it to run on every branch, you can whitelist branches starting with greenkeeper/.

We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

On Windows participants are shown separately in sequence diagram

Expected behaviour

Using participant key word to order actors in sequence diagram.
On Windows each participant creates a separate "actor" with same name as existing actor in the message sequence.

sequenceDiagram
    participant John
    participant Mary
    John->>Mary: call
    Mary->>John: answer

Actual behaviour

Include:

• Screenshot
• Preview mode: Mermaid
• Theme used: default

Suggestion: Save As Svg/Png

Would be really awesome to be able to export a diagram from the preview window as either an SVG or PNG. Both are supported by Mermaid directly.

One request -- possibly a different stylesheet to use for this as I wouldn't want the export to use the dark theme I use in Code.

Feature request: Save image

Hi

Sorry if this is the wrong place. I have a feature request:
it would be nice to be able to save the generated image.

Thanks for a great tool

Update to newest Mermaid version

Hi there!
I have recently started using your extension. Unfortunately, I cannot easily escape some characters (i.e. ":" cannot be escaped in any way), so I have decided to look for a solution. It seems to be resolved on the Mermaid side though (in version 0.5.2) - which led me to check if the extension is using the newest Mermaid version possible.

It looks like it does not, so my question is: is there any way to update it? Should this be done on the code side or I can do that manually somehow?

Best regards!
Filip

Unable to use custom mermaid settings

Expected behaviour

In the workspace settings, I have configured:

{
    "mermaid": {
        "sequenceDiagram": {
            "mirrorActors": false,
            "width": 250
        }
    }
}

Actual behaviour

VSCode reports: "Unknown configuration setting" on the string "mermaid". The settings are not applied.

Not open preview

No handler found for the command: 'extension.previewMermaidDiagram'. An extension might be missing an activation event.

Any dependency to show previews?

unable to customise themes for mermaid diagrams inside a markdown

Using the standalone preview for mermaid works:

Focus the cursor into the diagram on the left.
Diagram on the right uses the new theme.

Preview as a part of a markdown preview doesn't use the customised theme (on the left).
[cmd]+[shift]+[V]

The customisation is not working for markdown embedded previews.

integrate plugin with markdown preview

I'm not sure how to ask this. It seems that the latest vscode version supports this integration:

https://code.visualstudio.com/updates/v1_15#_support-for-markdown-preview-plugins

In those release notes another mermaid plugin is showing this integration.

Would it make sense to add this integration here also?

Thanks!

Does not render

New file with mermaid code within it > "Preview on Mermaid" > opens the preview pane and I put my cursor on it, but nothing happens as can be seen in the screenshot below.

Tried multiple times with different code.

The dev console logs:

[Embedded Page] Uncaught TypeError: Cannot read property 'setAttribute' of null
webviewElement.ts:392

macOS Mojave
VS Code: Version 1.33.1 (1.33.1)
Mermaid Preview: v0.11.2

Expected behaviour

graph TD
    Start --> Stop

Actual behaviour

[request] Handles more tags around mermaid code, like HUGO shortcodes.

Mermaid can be wired for examples with HUGO shortcodes (and inclusion of mermaid files in the HUGO's template). Sadly, the vscode-mermaid-preview does not work anymore in this situation, as the mermaid code is enclosed in a tag not known (yet) by the vscode extension.

For example, i'm using these tags :

{{<mermaid align="left">}} {{</mermaid>}}

The proposal would be to either take in account that kind of tags, either to allow to have customizable tags in a global vscode-mermaid-preview configuration.

Syntax Highlighting in Editor Window?

Question

Firstly, nice extension, it works perfectly.

I know this goes beyond the scope of this extension, but can you recommend any solution for syntax highlighting? I'm tired of looking at plain white on black. Are there any Mermaid language extensions to color my markup?

How to apply the Mermaid bundled netural theme?

Mermaid Preview 0.12.0

How to apply the natural theme?

This is what I've tried, but it doesn't work

{
    "mermaid": {
        "theme": "neutral",
        "themeCSS": ""
    }
}

Throttle preview update

Preview view crashes when typing fast.

classDiagram rendered all black and not completely

classDiagram
    Class01 <|-- AveryLongClass : Cool
    Class03 *-- Class04
    Class05 o-- Class06
    Class07 .. Class08
    Class09 --> C2 : Where am i?
    Class09 --* C3
    Class09 --|> Class07
    Class07 : equals()
    Class07 : Object[] elementData
    Class01 : size()
    Class01 : int chimp
    Class01 : int gorilla
    Class08 <--> C2: Cool label

vscode 1.9.1, mermaid preview 0.4.3

Black rendering on Windows OS

Hi,
Thanks for this great extension !

I've noticed a rendering problem when using Windows OS. The entire graph is black, see image below:

I thought this may be related to the other existing open issues but by chance I tried using OSX and it worked correctly:

Linux also works as expected:

I had a quick look and it seems that the extension path ${this.context.extensionPath} in content-provider.js on line 22 and line 31 is not being escaped correctly. If I manually edit the extension path string the graph will render as expected. I was going to submit a pull request but I didn't know the best way to fix the path.

Let me know if you need more information.

Thanks !
Michael

improve mermaid preview window layout behaviour

Expected behaviour

Allow mermaid preview (based on .mmd files) window to be put anywhere according to the vscode layout specifications (left, right, bottom, top, etc.).

Actual behaviour

When one drags and drops an existing mermaid preview window to a different layout structure (e.g. top-down split instead of left-right split), with a mermaid .mmd file being previewed, the follow error is thrown by vscode:

Unable to open Mermaid Preview: ModelService: Cannot add model because it already exists!.

VS code 1.30.2 (dark theme).