Mermaid Js

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

Mermaid.slim.js, mermaid.slim.min.js This bundle does not contain d3 which is useful for sites that already have d3 in place mermaidAPI.js, mermaidAPI.min.js, This bundle does not contain the web integration provided in the other packages but has a render function instead returns svg code.
The Mermaid.js configuration in GitLab is largely hard-coded. It looks like it uses the neutral theme by default and switches to the dark theme if. The user is using dark or solarizedDark as their web IDE theme, and; if the user is on the IDE web page.

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.

Usage

For styling Gantt charts see the Mermaid Documentation. However, since this method requires you to use a stylesheet I dont think that you can use it in the live editor. However, since this method requires you to use a stylesheet I dont think that you can use it in the live editor.

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

Zoom in/out is supported for live preview.

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. Spartan rc driver download for windows 10. 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. Download super talent usb devices driver. 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. Genius bluetooth devices driver download.

Configuration

Mermaid Jamaica

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

Mermaid Js Graph

This extension uses Feather icon set under CC BY 3.0