Skip to main content
🔗 Unlisted

Share visualization

Send this visualization to others.

Fork of Styled Mermaid Diagram

Unlisted visualization

Anyone with the link can view this unlisted visualization. Posting it publicly will make the link discoverable.

Viewing a saved revision (read-only)

11ec4cbfb07b4fe49c713d5f979bd862

Fork of Styled Mermaid Diagram

0 stars0🔗 Unlisted
CCurran Kelleher
Last edited Jan 15, 2026
Created on Jan 15, 2026

This example shows a state diagram for data loading with four states—Idle, Loading, Succeeded, and Failed—and the transitions between them. It uses Mermaid.js to parse the `stateDiagram-v2` definition and render the SVG, with custom styling applied via `styleSVGText` and `scaleSVG`. The code waits for the Inconsolata font to load using the Font Loading API before rendering, and overrides Mermaid’s default styling (text fill, font family, and label backgrounds) through CSS and JavaScript to ensure visual consistency.

AI-generated description