How to Share a Mermaid Diagram as a Web Page

To share a Mermaid diagram as a web page, save the diagram text as a .mmd file and publish that file. SnapHost draws it once, when you publish, and gives you a link that opens as a picture: fitted to the window, full size on a click, with the SVG and the original text there to download. Nothing to render on your side, nothing for the reader to install.

That is the short version. The rest of this post is about the file you probably have, which is a block of text an AI produced in a chat, and the handful of things that decide whether it becomes a page in one go.

Why you have Mermaid text and not a diagram

You asked ChatGPT to map a process, or Claude to sketch how a system fits together, and what came back was a diagram. It looked like one in the chat. Then you copied it to send to someone and discovered that what you copied is text: a dozen lines starting with flowchart TD, with arrows written as -->. The chat drew it for you. Your email client, your phone and your client's inbox will not.

Mermaid is the language those lines are written in. It is a good language for an AI to write, because it describes boxes and arrows in words, and that is exactly why the output is not a picture. Somewhere between the text and the person who needs to see it, something has to do the drawing.

The usual answers are a screenshot of the chat, which is blurry and stops being true the moment the diagram changes, or an online editor that renders the text and hands you an image to attach. Both work once. Neither gives you a link you can update, and neither lets you decide who can open it.

How to share a Mermaid diagram with one file

Save the text your AI gave you as a file ending in .mmd or .mermaid. Then publish that file on SnapHost: drag it into the dashboard, or, if your AI is connected, tell it to publish the diagram and it sends the file over itself. Connecting an AI works on every plan, Free included.

On publish, SnapHost reads the text and draws it to SVG on our side. The page that comes out shows the drawing the way it shows a picture: scaled to fit the window, with a click to see it at its own size. Under it sits a caption with the file name, what kind of diagram it is, and two downloads: the SVG, and the text it was drawn from. A diagram file is its page, so readers can always take the file with them, which matters when the person on the other end wants to change the diagram rather than just look at it.

If the file opens with Mermaid's front matter (a --- block with a title: line), that title is used as the diagram's title. Theme and layout settings in the same block are not taken: the drawing uses SnapHost's own layout.

Which diagram types are drawn

Three kinds are drawn today: flowcharts (files that begin with flowchart or graph), sequence diagrams (sequenceDiagram) and class diagrams (classDiagram). For most of what an AI writes when you ask for "a diagram of how this works", that covers it. Process flows, decision trees, who-calls-whom between systems, and how parts of a model relate are all one of the three.

Mermaid defines more types than that, and the rest are not drawn yet. A Gantt chart, a pie chart, a state diagram, a mind map, a timeline, an entity relationship diagram: publish one of those and the publish is refused with a message naming the type and saying it is not drawn yet. Nothing is stored. If the diagram matters today, ask your AI to express it as a flowchart instead, which usually works for a timeline or a state diagram and does not work for a pie chart.

A file whose first line is not any Mermaid header at all is refused too, with the line that stopped it. This is usually a copy-and-paste problem: the markdown fence (the three backticks and the word mermaid) came along for the ride. Delete that line and the one at the bottom, so the file starts with the diagram itself.

Drawn whole or refused

A diagram is either drawn completely or not published. There is no half-drawn page where the nodes it understood are shown and the rest are dropped. If one line cannot be read, the publish is refused and the refusal says which line. A reader who does not know the source cannot tell a silent gap from a design choice, so the gap is not allowed to exist.

The limits are generous for anything a person is going to read: up to 256 KB of text, 500 nodes and 1,000 links. A diagram an AI wrote in a chat is a few hundred bytes. The limits exist because the layout of a very large graph takes longer than a publish is allowed to, not because of anything you are likely to write.

When a refusal does land, the fix is almost always a paste back into the chat: "line 14 was refused, rewrite it". The AI wrote the diagram, so it is the right tool to repair it.

What a reader gets, and what they do not

A reader opens the link and sees the drawing. They do not get a Mermaid renderer running in their browser, because there is not one. The drawing is made on our side, from the text, and the page carries no diagram code and loads nothing from anywhere else. That is the same rule every SnapHost site runs under: a published page is served inside an isolated, locked-down frame, so one page cannot read another or reach your account.

For a diagram the practical effect is that the page is a page. It opens on a phone. It opens on a locked-down work laptop that blocks half the internet. The SVG download is a real vector file, so a reader who needs the diagram in a slide or a document can take it at any size without it going soft.

The text download is for the collaborator rather than the audience. If the person on the other end is going to edit the diagram, they need the source. The publishing docs say which of the other formats, from Word files to notebooks, travel with their file and which do not.

Deciding who can open it

A process diagram is usually an internal thing, and an architecture diagram usually says more about your systems than you would want on a public link. So the question of who can open it comes before the link goes anywhere.

A SnapHost site is either restricted, so only the people you name can open it and each one confirms their email before any content loads, or open to anyone with the link. On a restricted site you add people by email, and on Pro you can let in a whole company at once by its domain. Someone who is not on the list and opens the link can ask for access, and approving the request adds them. Every request, verification, view and denial is recorded, so you can see whether the diagram was opened before the meeting.

On Free you can have up to 3 pages at a time at sites.snaphost.ai with a small SnapHost mark in the corner, each private to up to 3 named people, or public. A new site on Free is public unless you name people first, so for a diagram you would not want found, add the names before you copy the link. On Pro the default flips: a new site is private unless you open it, the list has no cap, and you can put a password or an end date on any page. Pro is 19 euros a month for each member who can publish, and the people who only open pages are free. Pricing has the current lines, and sharing and access control has the details of each setting.

Updating the diagram after people have the link

Diagrams change more than documents do. The process gets a step, the system gets a service, and the AI hands you a new version of the text. Publish the new file to the same site and the link stays the same. On Free that is the whole story: the next person to open the link sees the current drawing, and the previous one is gone.

On Pro each update is saved as a version, the most recent ones are kept, and you can roll back to an earlier one while keeping the link. That matters on the day the AI "simplifies" a flowchart by removing the branch that was the whole point. How to roll back a published web page walks through it. If you want to look at a drawing before anyone can see it, keep the site as a draft: nothing is reachable until you publish.

Because the page is drawn from a file, the update loop can run without you. An AI connected to SnapHost can rewrite the diagram and republish it in one go, which is the same loop as updating a report or a dashboard. Nobody has to find the latest attachment.

When this is not the right path

Three cases, each with a better route.

• The diagram is a type that is not drawn yet and cannot honestly be redrawn as a flowchart, a sequence diagram or a class diagram. Render it in an editor, export the image, and publish the image: a single picture gets a page of its own on SnapHost too.
• The diagram is one figure inside a longer document. Export the drawing as an image, put it in the document, and publish that. A Word file becomes a page with its images in place, which sharing a Word document as a web page covers.
• The person on the other end wants to edit the diagram and never needs to look at it rendered. Send them the text. A page is for an audience.

For everything else, which is most of what an AI writes when you ask it to draw something, the .mmd file is enough. Save the text, publish the file, decide who can open it, and send one link that stays right as the diagram changes.