Share a Mermaid diagram as a link
Claude, ChatGPT and Gemini often answer with a Mermaid flowchart or sequence diagram. Put it in a small HTML file, upload it, and send a link that shows the rendered diagram to anyone.
Mermaid is a text format for diagrams: flowcharts, sequence diagrams, Gantt charts, entity-relationship diagrams and more. AI assistants use it often because a diagram is just a code block. The catch is that the code block only becomes a picture in a tool that renders Mermaid. Paste it into an email or a chat app and the recipient sees text.
A web page fixes that. Mermaid’s JavaScript library turns the code into a diagram in any browser, so one small HTML file plus a link is enough.
Wrap the diagram in an HTML file
Create a file called diagram.html with this structure, and paste your Mermaid code between the pre tags:
- ✓<!doctype html> and a <meta charset="utf-8"> in the head.
- ✓<pre class="mermaid"> … your diagram code … </pre> in the body. Several pre blocks give several diagrams on one page.
- ✓<script type="module">import mermaid from "https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs"; mermaid.initialize({ startOnLoad: true });</script> at the end of the body.
Or ask the AI to do it
Ask Claude, ChatGPT or Gemini: “Put this Mermaid diagram in a standalone HTML file that loads Mermaid from a CDN.” Save the reply as an .html file and open it locally to check it renders before you upload. If the page is blank, see why an AI page works in chat but breaks when hosted.
If you use Claude Code or Cursor, the FileShare Pro MCP server can publish the file directly: publishing HTML from Claude Code.
Upload it and send the link
Drag the .html file onto the FileShare Pro dashboard and copy the link. The page loads Mermaid from the CDN and draws the diagram, so it needs an internet connection to display. Viewers need no account and no diagram editor.
Shared pages carry a noindex tag, so an architecture diagram or internal process map does not appear in search results. On Pro you can add a password: password-protecting an HTML page.
Collect feedback on the diagram
Turn on comments and reviewers can leave a note on the page after typing a name, such as a missing step or an arrow that points the wrong way. The view count shows whether the people you sent it to have opened it.
When you change the diagram, upload the new file over the old one. The link stays the same and the previous version is kept in history: updating a shared link without changing it.
Frequently asked
Put the code in an HTML page that loads the Mermaid library, upload the page to a host that serves it as a web page, and send the link. The diagram renders in any browser.
Email clients and most chat apps do not run Mermaid. The code needs a page or tool that loads the Mermaid library to become a picture.
Yes. Add one <pre class="mermaid"> block per diagram. Mermaid renders each of them when the page loads.
Not with the CDN script. The page needs an internet connection to load the Mermaid library.
Yes. The free plan hosts up to 50 files of up to 100 MB each, with view counts and comments included. Password-protected links are on Pro.
Drop the file, copy the link — live in seconds, free plan included.
Start sharing free