explore

Footprints

Open the places and fragments left along the way

construction

Tools

A growing place for small tools and experiments

code

Open Source

Sharing and documenting excellent open source projects worth following

person

About

Learn who I am and what this site keeps circling back to

Theme

Switch to a reading atmosphere that fits the moment

Language

Switch the language of articles and moments

Recent Status

The update frequency of Codex App is too extreme, almost daily updates.

1
arrow_backBack to Toolbox

Toolbox

Mermaid Diagram

Render Mermaid diagram syntax in your browser with a pastel Flutter-style palette (light gray or black canvas), switch between rounded and square node corners, and export PNGs for light or dark layouts.

加载工具…

Browser-local rendering

Diagrams are parsed and drawn in your browser session. This page does not send your Mermaid source to this site's servers.

Export PNG (light / dark)

Light export uses a soft gray canvas (#eceef2) with pastel nodes and black connectors, similar to a light Flutter architecture sketch. Dark export uses a black canvas with the same pastel fills and bright red connectors for emphasis.

FAQ

Is my diagram text uploaded?

No. Mermaid runs locally in your browser; nothing is sent to this site's APIs for rendering or export.

What is the difference between light and dark PNG exports?

Light mode uses a gray canvas and black arrows; dark mode uses a black canvas with red arrows. Both reuse the same HeyBinyang pastel node palette (pink, yellow, blue tones) so exports match the on-page preview style.

Which Mermaid diagram types are supported?

Any diagram type included in this site's bundled Mermaid build (for example flowcharts, sequence diagrams, and class diagrams) can be previewed and exported if the syntax is valid.

SHARE

Share

Share this tool.

𝕏Xr/RedditfFacebook@ThreadsinLinkedIn