PDF → Mermaid: AI Diagram Extraction

How many times have you received an architecture diagram as a PDF, needed to edit it, and had to redraw the whole thing from scratch? PDF → Mermaid solves that.

What it does

Drop any PDF containing a sequence diagram, flowchart, or system architecture onto the page. The tool sends the PDF to OpenAI's vision API, extracts the diagram structure, and returns clean Mermaid.js code — ready to paste, edit, or open directly in the Mermaid editor.

Features

• OpenAI vision backend — GPT-4o reads the PDF as an image and extracts relationships
• Token counter — shows input/output tokens used per request
• One-click copy — copy the generated Mermaid code to clipboard
• Open in Mermaid editor — passes the code directly to the Mermaid tool via localStorage
• Live preview tab — render the extracted diagram before copying
• Drag-and-drop + click-to-browse — any PDF input method works
• Error state handling — clear messages when extraction fails or diagram is ambiguous

How it works

The API route converts the PDF to base64, sends it to OpenAI with a carefully engineered prompt that instructs the model to:

1. Identify all participants/actors in the diagram
2. Trace every message/arrow between them
3. Preserve directionality (solid vs dashed arrows)
4. Output valid Mermaid sequenceDiagram syntax

The prompt includes explicit instructions not to hallucinate participants that aren't visible and to use standard Mermaid arrow syntax (->>, -->>, ->, -->).

The integration trick

The most useful feature is the "Open in Mermaid Editor" button. When clicked, it:

1. Writes the generated code to localStorage under the key "nsd-code"
2. Opens /tools/mermaid in a new tab
3. The Mermaid editor reads that key on mount and populates the code editor

Zero URL encoding, zero query string size limits — just clean browser storage handoff.

Screenshots