Saving and sharing

The code and the diagram#

• Copy code puts the Mermaid on the clipboard, for GitHub, GitLab, Obsidian, Notion, or anywhere else that draws Mermaid.
• Save .mmd writes the code as a Mermaid file.
• Save SVG writes the diagram as a picture that stays sharp at any size. Its names are plain SVG text, so drawing programs and other browsers open it as it looks here.
• Save PNG writes the diagram at twice its size, with the page's fonts inside.

Mermaid draws the diagram in the site's look. The theme menu in the header changes both.

Embed a diagram#

Copy embed code, under the diagram, copies a frame to paste into a web page's HTML, a blog post, or anything else that takes an <iframe>. The frame shows the diagram, drawn as it is here, in the look you chose and with the hand-drawn look if it is on, and fits the diagram to its width; a wide diagram keeps to a readable size and scrolls sideways. The frame's page loads nothing from anywhere else, whatever the code says. The diagram's code is carried in the frame's own address, after the #, so nothing is stored anywhere and browsers never send it to the site; to change the diagram, copy the code again. The frame comes from the site you copied it on.

Use it offline#

Once any page of the site has been opened, it works with no connection: drawing, reading, Mermaid, and these docs. It keeps the whole site, about 6 MB, the first time. In Chrome or Edge on a computer, Install in the address bar (or the menu's Cast, save, and share, then Install page as app) puts it in a window of its own with its own icon. In Safari on a Mac, File, then Add to Dock, does the same, and on an iPhone or iPad, Share, then Add to Home Screen. An installed copy updates itself the next time it opens with a connection. Drawings are kept in each browser, or app, on its own.

The drawing#

More, then Save the drawing writes your strokes, names, line styles, and code as a small JSON file, and Open a drawing brings one back. If the reading came out wrong, fix the code first: a saved drawing keeps the code as you left it, which makes it a test case for the reader too.