Mermaid diagram previewer for Visual Studio CodeThe plugin enables live editing and visualization of mermaid supported diagrams. Related plugins: Usage
Supported formatsThe plugin detects mermaid diagrams in the following formats: HTML tag
Markdown fenced code```mermaid sequenceDiagram A-->B: Works! ``` HUGO shortcodes
Sphinx directives
The plugin does not preview diagrams in external files:
Standalone Mermaid filesFiles with extension
FontAwesome supportThe plugin aims to be on par with the Mermaid Live Editor on handling Font Awesome icons. MinimapEnabling/disabling minimap rendering is controlled with the Customize diagramsRenderingYou can customize the appearance of the previewed diagrams by setting the mermaid configuration in the workspace settings:
All mermaid configuration options are supported. Theme handlingDefault valuesBased on the theme used in Visual Studio Code, the plugin default themes are:
Overriding automatic light/dark selectionAutomatic theme selection can be changed with the following setting:
Custom themeYou can render the diagram using a custom theme by providing the following configuration properties:
:warning: The value |