{"version":"1.0","type":"rich","title":"Fork of Styled Mermaid Diagram","description":"This example shows a Mermaid.js state diagram that depicts the lifecycle of a data loading process (Idle, Loading, Succeeded, Failed) for a web application. The visualization is rendered dynamically by fetching the diagram definition from a separate `.mermaid` file and passing it to Mermaid's `render` method. The code uses Mermaid's `initialize` API to configure theme variables and spacing, and it waits for the Inconsolata font to load before rendering. After the render, the HTML is post-processed to enforce custom styling on SVG elements, including specific font sizes and black fills for state and edge labels.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/edf7b01877a14a3abd12c551f9385e5e?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}