Mermaid

ic.Mermaid renders diagram definitions as interactive SVGs using Mermaid.js v10. It supports all major diagram types (flowcharts, sequence, class, state, ER, Gantt, pie, and more), with built-in pan and zoom via d3. Diagram colors automatically inherit from the IC theme variables, so they match the rest of your figure without manual styling.

Diagram types

Value takes a Mermaid definition string. The component detects the diagram type from the syntax and renders it as an SVG. Here are a few of the supported types, pick one to see it in action.

Display options

ToolbarOnHover shows the floating zoom controls when the mouse enters the viewer. DarkMode switches to Mermaid’s dark color scheme, useful when your figure has a dark theme. HtmlLabels enables richer text rendering inside nodes (on by default), and Wrap auto-wraps long text in nodes and messages. RenderOnChange controls whether the diagram re-renders automatically when Value changes; set it to false if you want to batch edits and trigger rendering manually with render().

Height

Height accepts a pixel value or any CSS size string. Defaults to "100%".

Setting content

Value takes a Mermaid definition string. When RenderOnChange is true (the default), any change to Value triggers a re-render automatically. When it is false, call render() to trigger rendering manually. This is useful if you are building or modifying diagram source in a loop and only want to render the final result.

m = ic.Mermaid();

% Set a flowchart definition
m.Value = [
    "graph LR"
    "    A[Input] --> B[Process] --> C[Output]"
].join(newline);

% Manual render (when RenderOnChange is false)
m.RenderOnChange = false;
m.Value = updatedSource;
m.render();

Diagram-specific configuration

The Config property accepts typed configuration objects that fine-tune layout and behavior for specific diagram types. Three config classes are available: ic.mermaid.FlowchartConfig for controlling node spacing, edge curves, and padding; ic.mermaid.SequenceConfig for actor layout, message numbering, and alignment; and ic.mermaid.GanttConfig for bar sizing, axis formatting, and display mode.

m = ic.Mermaid();
m.Value = myFlowchart;

cfg = ic.mermaid.FlowchartConfig();
cfg.NodeSpacing = 80;
cfg.RankSpacing = 60;
cfg.Curve = "linear";
cfg.Padding = 20;
m.Config = cfg;

m = ic.Mermaid();
m.Value = mySequenceDiagram;

cfg = ic.mermaid.SequenceConfig();
cfg.ActorMargin = 80;
cfg.ShowSequenceNumbers = true;
cfg.MirrorActors = false;
cfg.RightAngles = true;
m.Config = cfg;

m = ic.Mermaid();
m.Value = myGanttChart;

cfg = ic.mermaid.GanttConfig();
cfg.BarHeight = 28;
cfg.BarGap = 6;
cfg.AxisFormat = "%b %d";
cfg.DisplayMode = "compact";
m.Config = cfg;

Zoom, pan, and render

zoomIn() and zoomOut() step the zoom by 20%. resetView() resets both zoom and pan to the initial state. render() forces a re-render of the current source, which is particularly useful when RenderOnChange is off.

Custom styling

You can target .ic-mermaid (the container), .ic-mermaid__viewport (the zoomable area), .ic-mermaid__controls (the hover toolbar), and .ic-mermaid__btn (toolbar buttons). To theme the diagram itself, set --ic-mermaid-* CSS variables on the .ic-mermaid root. These map directly to Mermaid’s theme engine, so you can control node fills, border colors, arrow colors, edge labels, and more without touching the diagram definition.

m = ic.Mermaid();
m.Value = elevatorControlLoop;

% Dark container with neon cyan border glow
m.css.style(".ic-mermaid", ...
    "border_radius", "6px", ...
    "border_color", "#00e5ff", ...
    "box_shadow", "0 0 12px rgba(0, 229, 255, 0.3)");

% Near-black viewport
m.css.style(".ic-mermaid__viewport", ...
    "background_color", "#0a0e1a");

% Neon-themed nodes: cyan primary, magenta secondary
m.css.style(".ic-mermaid", ...
    "--ic-mermaid-primary", "#0d3b66", ...
    "--ic-mermaid-primary-text", "#00e5ff", ...
    "--ic-mermaid-primary-border", "#00e5ff", ...
    "--ic-mermaid-background", "#0a0e1a", ...
    "--ic-mermaid-text", "#e0e0e0", ...
    "--ic-mermaid-line", "#ff2d95", ...
    "--ic-mermaid-link-color", "#ff2d95", ...
    "--ic-mermaid-edge-label-bkg", "#141828");

% Translucent toolbar
m.css.style(".ic-mermaid__controls", ...
    "background_color", "rgba(10, 14, 26, 0.85)", ...
    "border_color", "#00e5ff", ...
    "border_radius", "16px");

m.css.style(".ic-mermaid__btn:hover", ...
    "color", "#00e5ff", ...
    "background_color", "#1a2240");