Export a Claude Mermaid diagram

To export a Claude Mermaid diagram, use its native download option if the format you need is available, or copy the definition into Mermaid Live Editor for PNG or SVG. DocMyChat renders Mermaid diagrams as pictures in Word and PDF. Keep the source separately to change labels, arrows, or branches later.

Check the artifact’s own download

Open the diagram artifact first. If it offers the format you need, download it. Anthropic’s artifact guide distinguishes legacy artifacts, which have code, copy, and download controls, from newer templates with their own export options.

Inspect the saved file in a text editor or image viewer. An image gives you the drawing. Mermaid source gives you the instructions that build it. Renaming an HTML file won’t turn it into Mermaid source. If the download contains only a picture, collect the definition next.

Keep an editable definition in Markdown

Copy the complete Mermaid definition from the reply or artifact. If you see only a drawing, ask Claude for its definition as text, then compare the resulting diagram with the original.

After Markdown export, open the .md file and look for the actual definition. If it’s missing, add the source you copied. A picture reference or artifact link doesn’t provide editable nodes and arrows.

Here’s an illustrative approval flow for a client report:

flowchart TD
    A["Draft report"] --> B{"Approved?"}
    B -->|Yes| C["Send PDF"]
    B -->|No| D["Revise report"]
    D --> B

In a Markdown file, enclose that definition in a fenced code block: add three backticks followed by mermaid above it and three backticks below it. Keep the first line that declares the diagram type, such as flowchart TD or sequenceDiagram.

Save the note as report-approval.md alongside the image. In this example, a rejected report goes back for revision, and the last arrow sends it through approval again. Follow that loop when reviewing the result. Removing it would change the process, even if the drawing looked tidy.

Save PNG or SVG in Mermaid Live Editor

Use the official Mermaid Live Editor when you need a separate image file.

1. Copy the diagram definition without the surrounding Markdown fences.
2. Paste it into the Code panel, replacing the sample.
3. Review the labels and arrows in Preview.
4. Correct any errors.
5. Use Actions to export PNG or SVG.
6. Open the saved image before adding it to your document.

The panels and export options are described in Mermaid’s user guide. Keep explanatory paragraphs outside the code input.

PNG is a bitmap image. SVG is a vector format that scales without the pixelation of an enlarged bitmap. Choose SVG when the receiving app supports it. Check text and arrows at the size readers will see.

For the report example, save report-approval.svg beside report-approval.md. Add the same revision number to both names when you change the process, so you can match each picture to its source.

Put the diagram in Word or PDF

To save the diagram with Claude’s explanation, export the reply or chat. DocMyChat works on claude.ai in Google Chrome on a computer.

1. Open the conversation containing the diagram.
2. Use the export icon under the reply, or Export beside Share for the conversation.
3. Select Word or PDF.
4. For Word, open the .docx file that downloads immediately.
5. For PDF, choose Save as PDF in Chrome’s print dialog.
6. Inspect the diagram’s labels, arrows, and position on the page.

If the diagram is an artifact, leave Include artifacts on to include the artifact appendix. The Word export guide covers the rest of the document’s formatting.

Published Claude Docs and decks appear as titled links without their contents. If your diagram lives inside one of those, open the Doc or deck and use its own export controls to save that content.

The Mermaid picture isn’t a set of editable Word shapes. Change the definition and replace the picture when the process changes. For an existing report, insert the image you saved separately.

Render the source in your notes or repository

GitHub renders fenced Mermaid blocks in Markdown files, issues, pull requests, discussions, and wikis. Keep the mermaid language label and inspect the rendered view. The GitHub handoff guide covers saving the surrounding discussion beside your code.

Obsidian also uses a Mermaid code block. Put the definition inside that block in a note, then view the rendered diagram. Follow the Obsidian guide if you’re moving a whole conversation into your vault.

In Notion, create a code block with /code and paste the bare definition. Set its language to Mermaid and use the block’s diagram view. After importing Markdown, inspect the block’s language and source, then confirm that the diagram renders.

If a diagram appears as ordinary code, check the block’s language and current view. Source view is supposed to show text.

Make the change in the source

For the example above, replace “Send PDF” with “Send approved report” inside the node’s brackets. Keep its identifier C so the existing arrow still points to that node. Mermaid’s flowchart reference explains node labels and directions.

If your flowchart is too wide for the page, try changing flowchart LR to flowchart TD to arrange it from top to bottom. That may fit a portrait page better than shrinking every label.

You can also ask Claude: “Add a client review step after approval, and return the complete Mermaid definition.” Preview the new source, follow both outcomes, and export a replacement image.

For a sequence diagram, review the participants and message order too. Follow each arrow from sender to recipient. Valid Mermaid can still describe the wrong interaction.

Questions