mjbvz / vscode-markdown-mermaid

Adds Mermaid diagram and flowchart support to VS Code's builtin markdown preview

Markdown Preview Mermaid Support

Adds Mermaid diagram and flowchart support to VS Code's builtin Markdown preview and to Markdown cells in notebooks.

Currently supports Mermaid version 10.8.0.

Usage

Create diagrams in markdown using mermaid fenced code blocks:

```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
```

You can also use ::: blocks:

::: mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
:::

Configuration

• markdown-mermaid.lightModeTheme — Configures the Mermaid theme used when VS Code is using a light color theme. Supported values are: "base", "forest", "dark", "default", "neutral". Currently not supported in notebooks.

• markdown-mermaid.darkModeTheme — Configures the Mermaid theme used when VS Code is using a dark color theme. Supported values are: "base", "forest", "dark", "default", "neutral". Currently not supported in notebooks.

• markdown-mermaid.languages — Configures language ids for Mermaid code blocks. The default is ["mermaid"].

Using custom CSS in the Markdown Preview

You can use the built-in functionality to add custom CSS. More info can be found in the markdown.styles documentation

For example, add Font Awesome like this:

"markdown.styles": [
    "https://use.fontawesome.com/releases/v5.7.1/css/all.css"
]

Use it like this:

```mermaid
graph LR
    fa:fa-check-->fa:fa-coffee
```

vscode-markdown-mermaid's Issues

Text colors are not correct

reference:// mermaid-js/mermaid#570

As you can see it in the screenshot, ALT,OPT,LOOP titles are not visible. (text is there, it is just a dark color which makes it very difficult to read on dark theme.)

@tylerlong stated
Mermaid has a dark theme which is suitable for dark backgrounds. https://unpkg.com/[email protected]/dist/mermaid.dark.css

Visual "cursor" when editing

I'm currently editing a fairly complicated sequence diagram. I keep losing my place - while I can always see, obviously, where my text cursor is, I have to spend time trying to find the visual location corresponding to the cursor position, in the sequence diagram.

This would be useful in graphs and digraphs, too, where the renderer could highlight the node I'm currently editing.

Dark theme shouldn't be used with Markdown Preview Github Styling

When using:

• a dark VS Code theme
• mjbvz/vscode-github-markdown-preview-style
• mjbvz/vscode-markdown-mermaid

Mermaid charts are styled with illegible colors:

I'm not sure how you'd prefer to address this—a special case in theme detection, an override setting, or some user adjustment to markdown.styles?

Misplaced class in diagram

When I have multiple class diagrams in a single document, some classes are misplaced. There is no issue if there is only one class diagram.

In this example, the class Misplaced is rendered behind the class A, and the arrow from A points to a void space:

``` mermaid
classDiagram
class Misplaced
class A
A --> Misplaced
```
``` mermaid
classDiagram
class X
```

Output:

Problems packaging the extension with vsce

Hi,

I'm trying to create a private package of the extension with vsce package (I've installed packages and built it before this step) but I get the following:

C:\code\vscode-markdown-mermaid>vsce package
Error: Command failed: npm list --production --parseable --depth=99999
npm ERR! missing: dagre@https://registry.npmjs.org/dagre/-/dagre-0.7.4.tgz, required by [email protected]
npm ERR! missing: lodash@https://registry.npmjs.org/lodash/-/lodash-4.17.4.tgz, required by [email protected]
npm ERR! missing: minimist@https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz, required by [email protected]
npm ERR! missing: mkdirp@https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz, required by [email protected]
npm ERR! missing: moment@https://registry.npmjs.org/moment/-/moment-2.18.1.tgz, required by [email protected]
npm ERR! missing: lodash@https://registry.npmjs.org/lodash/-/lodash-3.10.1.tgz, required by dagre@https://registry.npmjs.org/dagre/-/dagre-0.7.4.tgz
npm ERR! missing: graphlib@https://registry.npmjs.org/graphlib/-/graphlib-1.0.7.tgz, required by dagre@https://registry.npmjs.org/dagre/-/dagre-0.7.4.tgz
npm ERR! missing: lodash@https://registry.npmjs.org/lodash/-/lodash-3.10.1.tgz, required by graphlib@https://registry.npmjs.org/graphlib/-/graphlib-1.0.7.tgz
npm ERR! missing: dagre@https://registry.npmjs.org/dagre/-/dagre-0.7.4.tgz, required by [email protected]
npm ERR! missing: lodash@https://registry.npmjs.org/lodash/-/lodash-4.17.4.tgz, required by [email protected]
npm ERR! missing: lodash@https://registry.npmjs.org/lodash/-/lodash-4.17.4.tgz, required by [email protected]
npm ERR! missing: escape-string-regexp@https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz, required by [email protected]
npm ERR! missing: isexe@https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz, required by [email protected]
npm ERR! missing: minimist@https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz, required by mkdirp@https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz

Any idea of what's going on?

Mermaid Flow Chart Box Sizing Issue

In the VScode Preview, the boxes for the flowchart do not auto-size correctly to display all the text in the box.

code:

graph TD;

A("ModbusMaster.read()") 
B("ModbusBaseConnection.read()<br/>Create ModbusPollItem<br/>add it to [m_priority_queue]")
C[/"m_priority_queue<br/>ModbusPollItem*"\]
D("ModbusBaseConnection::poll_task()<br/>remove from[m_priority_queue]<br/>ModbusBasConnection.modbus_library_read()")

%% Connections
A--> B
B--> C
C--> D
C--> B
D--> C

In VScode:

In Mermaid.js live editor:

Unexpected fillings in interpolate linkStyle

After adding linkStyle default interpolate basis parameter, link became filled with black
OS: Windows Server 2008 R2

notes in sequence diagrams do not wrap

When using the latest mermaid the text wraps correctly in this:

sequenceDiagram
  A-->B: Example
  Note right of A: This is a really long line that doesn't get wrapped
  B-->C: Example

When using the extension I need to put in
in order to get it to wrap correctly.

Please add support for class diagrams

An example of the class diagram is taken from the mermaid github readme:

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

if you try to select the content you can see that text exists there:

Text overflows box in flowchart

The above was generated from

   bFindOut -- continue --> cWhatHappened(S3 What Happened) 
    cWhatHappened -- continue --> dCategorise(S3a Categorise)

The text seems to overflow the flowchart box.

Is there a style sheet that I can weak to fix this?

Generated images are clipping text

All my images are clipping text on Ubuntu 18.04 e.g.

graph TB
  A(This is a string) --> B(This is another string)

Extra info:

• Happens with no other extensions enabled
• Happens on Linux but not on on Windows
• Happens on multiple Linux machines
• Happens on all past versions over the last year
• Happens even if I rebuild with latest dependencies & Mermaid 8.4.4
• Doesn't happen with github rendering or online mermaid tool
• Doesn't happen with mermaid-cli on the same Ubuntu machines

I guess it's something Linux specific in the VS Code rendering but I'd appreciate ideas of a work-around.

Version details:

Version: 1.41.1
Commit: 26076a4de974ead31f97692a0d32f90d735645c0
Date: 2019-12-18T15:04:31.999Z
Electron: 6.1.5
Chrome: 76.0.3809.146
Node.js: 12.4.0
V8: 7.6.303.31-electron.0
OS: Linux x64 5.0.0-37-generic

Name: Markdown Preview Mermaid Support
Id: bierner.markdown-mermaid
Description: Adds Mermaid diagram and flowchart support to VS Code's builtin markdown preview
Version: 1.4.1
Publisher: Matt Bierner
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=bierner.markdown-mermaid

Can not render with subgraph in mermaid

```mermaid
graph TB
	subgraph Rack1 Datanodes
		N1[Node1]
		N2[Node2]
	end
	subgraph Rack2 Datanodes
		N3[Node3]
		N4[Node4]
	end
	C2((Client)) -- Metadata ops --> NN1
	C2 -- Write --> N1
	N1 -. replication .- N2
	N2 -. replication .- N4
```

[feature request] Zoom in/out, Drag to move

It would be nice if the preivew can be dragged move and zoom in/out.
Sometimes the mermaid graph are very big with many sub-graphs.
It's difficult to find a node ..
Thanks.

Unable to open two previews

test1.md and test2.md
open preview for both
VSCode closes one, I presume because the filenames are matching

Diagram Does Not Render when Remote

My markdown file is on a remote linux server. The extension installed fine on the remote host, but it isn't rendering correctly in the previewer. I just copied and pasted the sample mermaid block from the readme into a new .md file. Other markdown statements in the file render fine in the previewer. The diagram, however, just shows "graph TD:" and the other lines as text. Does it not work remotely, or am I missing some configuration?

Syntax error detection

Right now if I make a grammatically incorrect line, I get no rendered diagram at all. If I'm editing several dozen lines of sequence diagrams it would be super helpful to have some way of detecting that I have dropped a : or whatever.

Whether that's through syntax highlighting or "best effort" rendering (rendering everything up to the error), I don't mind, as long as I have a way of detecting how I've messed up.

Feature Request: Port for Azure Data Studio

Azure Data Studio is built on VS Code and is mostly compatible. It lets you edit markdown in the same way, and also allows markdown code blocks in Jupyter style notebooks. It uses the same VSIX format for extensions also.

I tried installing the VSIX in it manually and my observation is that neither of those two scenarios work right now which isn't unexpected ^^

Specifically the md files do recognise the ``` mermaid block comes out in the preview as a grey block (so it seemingly passes it onto the extension but something goes wrong - if you changed it to mermaid2 or something else nonsensical then it renders as a normal dummy code block). The Jupyter style notebooks though are always rendering as normal text so probably don't get passed on (but if they did that would have been cool...).

I don't know enough to create or edit these extensions (maybe one day) but I wanted to put it up here as a feature request in case others show interest because this extension is unequalled and I use it a lot.

Word wrapping in Notes

I am hand-adding <br/> tags to stop text in notes from overrunning the border. It would be great if the renderer did that automatically.

It's especially annoying if I carefully get the text in the box, realise I need to reword the text, and then have to manually reflow all the <br/> tags.

Support for Mermaid v.8.4

Can you please support latest Mermaid Version 8.4 with new diagram type: state diagram

http://knsv.github.io/mermaid/#/stateDiagram

Thanks!
Kind regards,
Jan

is not working in the VScode v1.21.0

Support for default classDef

Seems that class support is there, but mermaid has classDef deafult ... that applies to all nodes.

Default class

If a class is named default it will be assigned to all classes without specific class definitions.
classDef default fill:#f9f,stroke:#333,stroke-width:4px;

It's under flowchart

sequenceDiagram: autonumber

Hi,

I am trying to use the autonumber feature in sequenceDiagrams with Markdown Preview Mermaid support v1.4.2 and Visual Studoi Code 1.41.0. Is this feature supported because the rendering does not work for me.

thanks

Fails to render with mermaid titles

bierner.markdown-mermaid preview but don't export

Class annotation doesn't work

Class Annotations don't work when i try something like this below:

classDiagram
class Shape{
    <<interface>>
    noOfVertices
    draw()
}
class Color{
    <<enumeration>>
    RED
    BLUE
    GREEN
    WHITE
    BLACK
}

Use webpack for bundling mermaid.js

There is currently an encoding issue that prevents webpack builds of mermaid from working properly. This needs an upstream fix in VS Code.

latex + mermaid

hi, any suggestions on rendering latex within a mermaid block? or parsing .md containing mermaid using pandoc, to produce eg. .pdf?

what is fsdaf command? is it typo?

vscode-markdown-mermaid/package.json

Line 33 in 0ea3d0b

"command": "extension.my_command",

vscode-markdown-mermaid/package.json

Line 34 in 0ea3d0b

"title": "fsdaf"

Mermaid diagrams cessed to work

Mermaid diagrams stopped working in code-insiders (v. 1.31.0) for about 2 weeks (tested in Windows and Fedora). Others markdown features are still working.

Incorrect colorization in high contrast mode

We currently use the light theme in high contrast mode. I think we should use the dark mermaid theme instead.

Basic support for fontawesome not working

Based on the official documentation, it should be possible to include fontawesome icons in flowchart diagrams using the syntax fa:#icon class name#. However the icons aren't rendered on my computer:

Expected behaviour

graph TD
    fa:fa-check

Actual behaviour

Detect mermaid code block in more formats

Is it possible to find mermaid code blocks in more places in a markdown files? Here are some examples:

HTML

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

Hugo

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

Even more here: https://github.com/vstirbu/vscode-mermaid-preview

This extension doesn't work

Hello,

This is my README.md, like in the Changelog of VS code

```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!
​```

And this is the preview:

I'm using the latest VS Code

Thanks

Unable to install from market place

I click the green Install button which turns blue and says Installing. After a minute, the button turns back green and says Install.

I tried mermaid in markdown, but it does not render.

I'm on macOS Sierra (10.12.5) and Code version 1.15.1.

Included Mermaid CSS produces some unlegible text for non-light themes

Using this sample Markdown:

### Sequence diagram

 ```mermaid
sequenceDiagram
loop every day
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!
end
```

Produces this preview using the Light+ theme in VSCode:

Unfortunately it also produces this output using the default Dark+ theme:

I noticed you are including ./node_modules/mermaid/dist/mermaid.css which works well for diagrams against a light theme, however there are also mermaid.dark.css, mermaid.forest.css, and mermaid.neutral.css available. Is there any way to get the extension to include a different style sheet based on your theme? There seems to be a comment to this effect here however I could not find any documentation here or here confirming this.

I really like using mermaid syntax within my Markdown, but I also really like using dark themes in my editor. Currently I'm using this extension which handles using different CSS based on your theme, but it only shows a preview of a single mermaid diagram and doesn't integrate with the rest of your Markdown preview.

Pluggin do not work in VSCode v1.21.0

# VSCode

版本 1.21.0
提交 9a199d77c82fcb82f39c68bb33c614af01c111ba
日期 2018-03-07T11:04:09.886Z
Shell 1.7.9
渲染器 58.0.3029.110
Node 7.9.0
架构 ia32

Has been confirmed when version 1.19.0 is available, when the update to 1.21.0 plugin fails.

Flowchart Database does not render image

Does not render the cilinder for the database

id11[(DataBase)]

contributes properties change to markdown.previewStyles and previewScripts

Hello.

Please change package.json to following new properties.

from

  "contributes": {
    "markdown.preview": {
      "styles": [
        "./node_modules/mermaid/dist/mermaid.css"
      ],
      "scripts": [
        "./node_modules/mermaid/dist/mermaid.min.js",
        "./oceanaut.js"
      ],
      "markdownit.plugins": true
  }

to

  "contributes": {
    "markdown.previewStyles": [
      "./node_modules/mermaid/dist/mermaid.css"
    ],
    "markdown.previewScripts": [
      "./node_modules/mermaid/dist/mermaid.min.js",
      "./oceanaut.js"
    ],
    "markdownit.plugins": true
  }

Thank you.

Best regards.

How to print result

Hi,
I created a nice markdown document that combine real markdown elements as well as several sequence diagrams but now that the document is complete, how can I print or export the result to share the doc with other colleagues?
If I use another markdown editor, the marmaid tag is not going to be recognized I guess, that mean I have to print or export from VS code but I didn't find any options by looking at the preview window or native commands.
Any idea or workaround?

Thanks in advance

Regards,
Johnny -

Underscore in elements name and subgraph titles doesn't supported

👉 See example code there

👉 Please, try to test it on https://stackedit.io/app#
It rendering very well:

How to export MD file to HTML or PDF?

Good Extention!!! It's nice and usable.

But now I have a question: how to export my MD file to some format that can be shared to others?

Have you found out how to style the fonts, aside from font-awesome?

I've been trying to increase the font size a bit and the usual css values arent working.

Configuration to use ::: instead of ```

Hey guys,

Great work on the project. We love to use it.
I have a question:
Is there any configuration that we can change the character that is used to "define" a mermaid diagram?
We use Azure DevOps Wiki and there, to recognize that the "segment" is a mermaid Diagram, they only accept ::: instead of , so when we write the markdown in VSCode, we write using and than we need to remember to change to ::: before published.

Thanks in advance,

Daniel

goessner.mdmath preview but don't export

Support double-arrowed lines

I'm referring to this feature: mermaid-js/mermaid#123 (comment)

Example:

graph LR
  A <--> B

Support for exporting mermaid files .mmd to svg images

Hello - it would be very nice to have ability to export mermaid files to svg images with some command or probably automatically on valid markup save.

Support for pandoc/etc. fenced_code_attributes

Hi,

Have you considered supporting fenced_code_attributes [1], so it is possible to add extra HTML classes and parameters to things like pandoc (I'm currently working on a new pandoc-mermaid-filter that will use Inkscape to render mermaid-svg to PDF or EMF for inclusion in PDFs and DocX. It would be useful to be able to supply parameters, and at the same time use your extension to preview the files in VS Code.

[1] https://pandoc.org/MANUAL.html#fenced-code-attributes

Inline style not working .

Start((<img src='https://iconscout.com/ms-icon-310x310.png' width='20' height='20' /> 开始))
           --> node_types{node_types?}

Typora :

Compatability with WebSequenceDiagrams' syntax "End Note" and "Title"

As a user, I would like to be able to seamlessly import my designs from WebSequenceDiagrams.com and use the same syntax. For instance, i cannot use multi-lined noted using Note Over and Note End to end the block, as well as, Title which displays the title of the diagram in the top center.

Suggested Feature

This would allow us to create a title for the diagram, and have multi-lined notes.

sequenceDiagram
    title WHAT IS THIS DIAGRAM
    Alice->>Bob: Hello Bob, how are you?
    note over Alice,John
       A typical interaction
       And a second line for talking points
    end note

    alt is sick
        Bob->>Alice: Not so good :(
    else is well
        Bob->>Alice: Feeling fresh like a daisy
    end
    opt Extra response
        Bob->>Alice: Thanks for asking
    end

Support mermaid 8.5

With version 8.5 there are some bug fixes and enhancements, plus a new diagram type, entity-relationship diagrams.

https://github.com/mermaid-js/mermaid/releases/tag/untagged-31c93788afe260d914bb