Global Mermaid Chart Generator

Generate a Mermaid architecture diagram that is flexible, stylized, and ready to be used in social media posts, documentation, or generic markdown files.

Output Format

Always output the result as a raw markdown ````mermaid` code block directly in the chat, AND an HTML snippet wrapping the mermaid block that applies the Atherial diagonal background texture behind the chart. This allows the user to easily screenshot the rendered preview in Cursor for use on social media.

Do not use an %%{init: ...}%% block. We rely on the classDef definitions to style the nodes, which ensures compatibility with various renderers while maintaining the brand aesthetic.

Step 1 — Gather Context

Before generating the diagram, ask the user:

1. What is the system or process? (What triggers it? What are the main steps? What is the output?)
2. What is the context? (Is this for a social post? A technical doc? This determines how simplified the labels should be.)

Step 2 — Apply Node Color Classes (Atherial Brand)

Customize: these are the author's brand colors (accent green #85ff0a, dark #00140a/#1f1f1f, off-white #faffeb/#fefffa). Replace these hex values — here and in the background texture below — with your own palette.