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.

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

Data Loading State Diagram

A visual state diagram showing the flow of data loading states using Mermaid.js.

Overview

This project displays a state diagram with the following states:

  • Idle: Initial state, waiting for data load request
  • Loading: Active data loading in progress
  • Succeeded: Data loaded successfully
  • Failed: Data loading failed

States and Transitions

Comments

Sign in to join the discussion.

MIT Licensed