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. 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 |