Add Mermaid diagrams to X Articles

X Articles cannot render Mermaid code, so a flowchart pasted as text shows up as a code block. Article Studio renders each Mermaid block to a PNG image in your browser and puts it back in the same place in the article. You do not need to take screenshots.

Steps

In Article Studio, write a fenced code block with the language mermaid, or insert one from the editor toolbar. Imported Markdown files work the same way.
The preview shows the rendered diagram. Check that labels are readable, including in the phone preview.
With the Chrome companion, choose Create X draft. The diagram is uploaded as an image and placed where the code block was.
Without the companion, download the diagrams from Images & diagrams → Download all (.zip) and add them in X where the image markers show.

Example

```mermaid
flowchart LR
  Draft[Write in Markdown] --> Preview[Preview]
  Preview --> X[Create X draft]
```

How the images are made

Diagrams are rendered with Mermaid 11 on a white background at 2× resolution, capped at 1,600 pixels wide.
The result is a static image. Links, tooltips and click actions inside the diagram do not carry over.
Rendering happens in your browser. The diagram source is not sent to a rendering service.

Limits

A diagram must be its own code block. Mermaid inside lists, quotes or other code blocks is blocked, as are diagrams Mermaid cannot parse. The preview points to the line to fix.
Each diagram counts toward the 40-image limit per draft, together with photos and PNG tables.
Wide diagrams are scaled down to fit. Very dense charts can be hard to read on phones; split them or use a top-to-bottom layout such as flowchart TD.

Related guides

Article Studio is an independent tool and is not affiliated with or endorsed by X Corp. X controls Articles access and final rendering; check each draft in X before publishing.