CodeMermaid Flowchart

CodeMermaid is a flowchart rendering component based on Mermaid, supporting dynamic rendering of Mermaid diagrams.

Basic Usage

Use the content property to pass in a Mermaid syntax string.

Slot - Custom Toolbar

Supports slot definitions. When customizing the toolbar, you need to handle theme color adaptation yourself. There are two types of toolbars:

1. Hover toolbar
2. Fullscreen toolbar

WARNING

When configuring theme and mermaidConfig individually, all components must have the same configuration. Because Mermaid uses globally unified rendering configuration and cannot be configured individually during rendering, otherwise it will cause inconsistent rendering configurations. Unless you are rendering asynchronously, tab switching types can be changed.

Props

Property	Type	Required	Default	Description
content	string	Yes	—	Mermaid syntax content
disabledZoom	string	No	[]	wheel: Disable wheel zoom fullscreenWheel: Disable wheel zoom in fullscreen mode clickMove: Disable click drag zoom fullscreenClickMove: Disable click drag zoom in fullscreen mode all: Disable all
theme	string	No	base	Mermaid theme, supports default, forest, dark, neutral, base
fullscreenMode	string	No	page	Fullscreen mode, supports web (web fullscreen) and page (page fullscreen)
mermaidConfig	MermaidConfig	No	{}	Mermaid config object, see Mermaid Config

Slots

Slot Name	Description	Slot Parameters
fullscreen-toolbar	Fullscreen toolbar	isCodeView: Currently showing code(true) or mermaid chart(false) isCopied: Copy status, 1s interval before next copy onCopy: Copy code function toggleView: Toggle between code and mermaid chart zoomIn: Zoom in zoomOut: Zoom out resetZoom: Reset to default toggleFullscreen: Toggle fullscreen downloadPng: Download image
toolbar	Normal toolbar	Same parameters as above

Ref

Method Name	Description	Parameters
toggleView	Toggle code/chart view	-
zoomIn	Zoom in	-
zoomOut	Zoom out	-
resetZoom	Reset zoom	-
toggleFullscreen	Toggle fullscreen	-
downloadPng	Download PNG image	-
onCopy	Copy code	-