• Mermaid Js Themes
• Mermaid Graphs
• Mermaid Js Sequence Diagram
• Mermaid Jar Blue Tissue Paper

Cheat Sheet for Mermaid. Gantt dateFormat YYYY-MM-DD title Adding GANTT diagram functionality to mermaid section A section Completed task:done, des1, 2018-01-08 Active task:active, des2, 2018-01-09, 3d Future task: des3, after des2, 5d Future task2: des4, after des3, 5d section Critical tasks Completed task in the critical line:crit, done, 2018-01-06,24h Implement parser.

Mermaid Editor is vscode extension inspired by official mermaid live editor to provide the following features:

• Live edit .mmd file with mermaid.js diagram
• Syntax highliting.
• Generate image file from .mmd file with preferred format (png, jpg, webp and svg).
• Customize configuration for individual mmd diagram by using atrribute which is available in this extension.

• Similar to nomnoml, Mermaid’s main focus is the generation of diagrams from text files, in this case via a simple markdown-like script language. It depends on d3 and dagre-d3 for providing the graphical layout and drawing libraries.
• Cheat Sheet for Mermaid. Gantt dateFormat YYYY-MM-DD title Adding GANTT diagram functionality to mermaid section A section Completed task:done, des1, 2018-01-08 Active task:active, des2, 2018-01-09, 3d Future task: des3, after des2, 5d Future task2: des4, after des3, 5d section Critical tasks Completed task in the critical line:crit, done, 2018-01-06,24h Implement parser.
• Diagram in mermaid markdown-like language or file (as a connection or file name) containing a diagram specification. If no diagram is provided diagram = ' then the function will assume that a diagram will be provided by htmltools::tags and DiagrammeR is just being used for dependency injection.
• Mermaid is a simple markdown-like script language for generating charts from text via javascript. Simplify documentation and avoid heavy tools. Open source Visio Alternative. Commonly used for explaining your code! Mermaid is a simple markdown-like script language for generating charts from text via javascript.

Usage

The extension is activated when opening .mmd file.

Open live preview

• Select Mermaid:Preview mermaid from context menu or command palette
• Click Mermaid:Preview diagram icon at right corner
• ctrl+alt+[ on .mmd file

Generate image

Generate command is only available when .mmd file is opened and live preview is activated.

• Select Mermaid:Generate image from context menu or command palette
• Click Mermaid:Generate image icon
• ctrl+alt+] on .mmd file

Change scale of live preview

Mermaid Js Themes

Zoom in/out is supported for live preview.

Mermaid Graphs

• Select Mermaid:Zoom in, Mermaid:Zoom out, Mermaid:Reset zoom, Mermaid:Zoom to specific scale from command palette
• Click Mermaid:Zoom in, Mermaid:Zoom out icon focusing live preview panel
• Zoom out: ctrl+alt+-
• Zoom in: ctrl+alt+=
• Reset zoom: ctrl+alt+0

Attributes

This extension supports attribute to specify preferred configuration for each .mmd file. The attribute have to be described in comment of mermaid syntax.

@config{path_to_config}

Each .mmd file can be associated with mermaid configuration. With this attribute, .mmd file can read specified configuration. path_to_config have to be described as relative path to the config json file from associated .mmd file. If this attribute is not provided, default config file setting up in mermaid-editor.preview.defaultMermaidConfig is applied.

@backgroundColor{color}

Each .mmd file can be associated with preferred background color. With this attribute, .mmd can read specifed background color with CSS style property format.If this attribute is not provided, default background color setting up in mermaid-editor.preview.backgroundColor is applied. The followings are example.

Mermaid Js Sequence Diagram

Mermaid Jar Blue Tissue Paper

Configuration

Settings for look & feel in preview or image generator.

Setting	Default	Description
mermaid-editor.preview.defaultMermaidConfig	relative path to the default configuration json file for mermaidjs.
mermaid-editor.preview.backgroundColor	white	default background color for live preview and generated image
mermaid-editor.preview.errorOutputOnSave	true	show error output console whe saving file if there's error message. Note: Error output in the console itself is always available regardless of this configuration.
mermaid-editor.generate.type	svg	output image file type [svg, png, jpg, webp]
mermaid-editor.generate.outputPath	relative path to the output target directory from project root
mermaid-editor.generate.useCurrentPath	true	use relative output path as same as target mmd file instead of 'outputPath'
mermaid-editor.generate.width	800	width of the output image
mermaid-editor.generate.height	600	height of the output image

Credits

This extension uses Feather icon set under CC BY 3.0