Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Styled Mermaid Diagram

Public visualization

Viewing a saved revision (read-only)

93c4855a66c24e86ae0a66a0be910047

Styled Mermaid Diagram

0 stars5🌍 Public
CCurran Kelleher
Last edited Jul 3, 2025
Created on Jul 1, 2025

This example shows a state diagram for a data loading process, depicting transitions from Idle to Loading, and from Loading to either Succeeded or Failed states. The visualization uses Mermaid.js to render the diagram, with JavaScript code that fetches the diagram definition from a separate file and renders it as SVG. The styling is customized with the Inconsolata monospace font, and the JavaScript API waits for document fonts to load before initializing Mermaid's rendering engine.

AI-generated description

Data Loading State Diagram

This project visualizes a state machine for data loading processes using Mermaid.js. The main states are:

  • Idle → Loading via loadData()
  • Loading → Resolved on success
  • Loading → Rejected on error