Every example starts as ordinary Mermaid and remains reproducible without a model.
Flowchart · state · sequence · class · ER · XY chart · pie · GitGraph · architecture-beta
Customers, an API, a database, and a queued notification path. Six services and one explicit platform boundary, rendered with Mermaid's native architecture renderer and Lucide icons.
Architecture supports rendering and audit, not automatic polish. The boundary is illustrative, not a verified security control.
A complete 26-service reference with explicit ports, measured icon and label geometry, and nested boundaries. Relationships stay neutral: the renderer does not guess which path carries requests.
architecture-beta group account(cloud)[AWS account] group vpc(cloud)[VPC · two AZs] in account group eksGroup(cloud)[Amazon EKS] in vpc service route53(logos:aws-route53)[Route 53] service cloudfront(logos:aws-cloudfront)[CloudFront] service waf(logos:aws-waf)[WAF]
A complete flowchart with a clear activation path and a payment-recovery loop that stays readable without competing with the successful path.
flowchart TD
signup([Trial signup]) --> profile[Create profile]
profile --> plan{Select a plan?}
plan -->|Plan selected| payment[Verify payment]
payment --> accepted{Payment accepted?}
accepted -->|No| retry[Request another method]
accepted -->|Yes| provision[Provision workspace]
Sequence diagrams keep their native visual conventions while Beautiflow provides deterministic rendering and verifiable output.
sequenceDiagram participant Customer participant Support participant Diagnostics participant Specialist Customer->>Support: Report intermittent failure Support->>Diagnostics: Collect recent traces Specialist-->>Support: Recommend configuration fix Support-->>Customer: Explain and apply fix
Install the runtime, add the skill, and start with your own Mermaid.