How to create editable diagrams with AI

Steps at a glance

1. 01 / processDescribe

   Write the actual steps and decision rules.

2. 02 / processDraft

   Ask a text AI for Mermaid, or adapt our complete example.

3. 03 / processCheck

   Follow both paths and correct invented or missing steps.

4. 04 / processExport

   Keep .mmd source and reopen the SVG you save.

Turn a written process into a diagram you can change

A useful process diagram should survive the first revision. If a colleague changes a step, you should be able to update its words and arrows without generating the whole picture again.

The practical route is to ask a text AI for Mermaid source, then render that source as a diagram. Mermaid describes boxes, decisions and connections in plain text. You keep that text as an editable .mmd file and export an SVG when you need a sharp image for a document or slide. Mermaid's introduction explains the approach.

Our example is a fictional shop's click-and-collect process. The supplied brief and reference source are written by us, so you can follow the rendering and editing steps without an AI account. Use the prompt to turn your own process into a first draft when you are ready.

The compact preview above is our hand-drawn SVG layout of that same process. It keeps the stock decision and both endings visible together. The downloadable Mermaid source and its actual Live Editor render appear below; the two layouts describe the same eight nodes and seven connections.

What you need

• A short process description with an identifiable start and finish.
• A browser and Mermaid Live Editor for the simplest rendering route.
• Any text AI you already use, if you want it to draft the Mermaid source. A free allowance or an existing local text model can be enough for a small example; availability depends on your chosen service or model.
• A text editor to save the source, such as Notepad or VS Code.

For your first attempt, use fictional information. Remove names, customer details and confidential rules before sending a brief to a hosted AI or online editor. Live Editor's published implementation can use external rendering services for export and sharing actions; it is not our recommendation for confidential diagrams. Use the local CLI route below when your diagram must stay on your computer.

1. Write the process before asking for a diagram

Start with the actual decisions rather than a paragraph full of background. This is our example brief:

Fictional shop: click-and-collect orders
1. Receive an order.
2. Check whether every item is in stock.
3. If any item is unavailable, contact the customer and finish this process.
4. If every item is available, reserve the items.
5. Notify the customer that the order is ready.
6. At collection, check the order reference.
7. Hand over the reserved items and close the order.
Do not add payment, delivery, cancellations or stock-purchasing steps.

The final sentence matters. It prevents the first draft from quietly becoming a different process. If your real business has a payment or cancellation branch, write that rule explicitly before adding it to the diagram.

2. Ask for source that stays editable

Paste your brief into your chosen text AI with these instructions:

Convert the process below into a small Mermaid flowchart.
Return one Mermaid code block and a short list of any ambiguities.
Use flowchart TD, simple ASCII node IDs, quoted labels and labelled Yes/No decision arrows.
Represent only the rules supplied. Do not invent steps or policies.
Keep labels short enough for a slide.
Do not include links, HTML, scripts, icons, directives or external resources.
If a rule is ambiguous, ask about it rather than deciding for me.

PROCESS:
[Paste the process here.]

You are asking for a draft, not approval of the process. Read the ambiguities before opening the renderer. If the AI needs a missing rule, answer it in your brief and regenerate the source.

A hosted chatbot is convenient on a basic laptop. A local text model gives you control over the runtime and files, provided it is already installed and suitable for the task. Neither route needs an image-generation model. If you are choosing a local setup, start with Can I run AI locally?.

3. Compare the arrows with the rules

Here is our hand-written reference for the supplied brief. The downloadable click-and-collect.mmd adds our colour theme to these same steps. To reproduce the styled example, paste the whole downloaded file, including the configuration between the opening --- lines. Download the editable source.

flowchart TD
    A["Receive order"] --> B{"All items in stock?"}
    B -->|No| C["Contact customer"]
    C --> D["Finish this process"]
    B -->|Yes| E["Reserve items"]
    E --> F["Notify customer: ready"]
    F --> G["Check order reference at collection"]
    G --> H["Hand over items and close order"]

Follow both paths with your finger or a cursor. When stock is missing, the diagram should reach Contact customer and stop at Finish this process. When stock is available, it should reach collection and handover. There should be no arrow from the unavailable-stock branch to reservation.

Now check your AI draft the same way. Are the Yes and No labels attached to the correct arrows? Has it omitted a step, invented a policy or made two different steps share the same node ID? A diagram can render perfectly and still describe the wrong process.

Open the complete flowchart.

4. Render it in the free browser editor

1. Open Mermaid Live Editor.
2. Replace its example code with the source above, or paste the complete downloaded .mmd to use our theme. Leave out the opening and closing triple backticks from a chat response. Keep the downloaded file’s --- configuration block if you want its colours.
3. Read the rendered diagram and any error message. The expected flow has one stock decision and two branches.
4. Change Notify customer: ready to Send collection email in the source. Check that the matching box changes while the connections remain the same.
5. Copy the revised source into your text editor and save it as click-and-collect.mmd using UTF-8. In Notepad, choose All files if needed so the filename does not become .mmd.txt.
6. Use the editor's Actions export to save an SVG. The official Live Editor project documents SVG export; control wording can change with editor updates. If your export action uses a remote renderer, use the local route for sensitive content.
7. Open the saved SVG and the .mmd file. Check that both show your revised wording. Keep the two files together.

Use flowchart TD for a tall layout, or change it to flowchart LR to try a wider slide layout. The official flowchart syntax covers these directions, labels and decision shapes. Try the layout before shortening important wording. Mermaid’s theme settings explain how to change colours and fonts without changing the process.

5. Render locally when you need local files

The official Mermaid CLI reads a Mermaid definition and exports SVG, PNG or PDF. This route requires a working Node.js/npm environment and installs the renderer with its browser dependencies. The one-off software download is separate from rendering your diagram.

In a terminal, install the CLI as documented:

npm install -g @mermaid-js/mermaid-cli

Open the folder containing your saved .mmd, then export:

mmdc -i click-and-collect.mmd -o click-and-collect.svg
mmdc -i click-and-collect.mmd -o click-and-collect.png
mmdc -i click-and-collect.mmd -o click-and-collect.pdf

Choose a new output name if a file already exists and you want to retain it. Open each file you need, check the wording and save the source beside it. If mmdc is not recognised after installation, reopen the terminal and check npm's executable path. Browser-launch errors belong to the CLI's browser setup; the source text alone cannot fix them.

These commands are documentation-based instructions. We have not installed or executed the local CLI for this guide, and we have not benchmarked a text model's diagram accuracy.

What is actually editable?

An SVG is not automatically a native, editable PowerPoint flowchart. Some applications offer conversion to shapes, with results depending on their support for the SVG's structure. If colleagues must edit individual boxes and connectors inside PowerPoint, rebuild this small diagram with native shapes, then use the .mmd as the reference. Avoid promising an editable presentation when you only have an image.

When a paid diagram workspace makes sense

For a few small diagrams, the free editor and saved source files are a sensible start. A hosted workspace becomes attractive when you need organised diagrams, team sharing or integrated AI drafting rather than keeping track of files yourself.

Mermaid's hosted pricing page lists free access and paid tiers with larger diagram allowances and AI credits. Check the current billing period, account limits and export options before subscribing. A paid plan buys workspace capacity and features; you still need to check the process and retain a useful export. We have not tested that account workflow here.

Fix the common problems

Keep a useful diagram package

Save your brief, .mmd, exported image and the two branch checks in one folder. Include a date and who checked the process. That small habit makes the diagram useful when someone asks why a step exists or what changed.

Our starter pack contains the original fictional brief, the complete .mmd, the AI drafting prompt and a filled example of the branch checks. It gives you a working process to adapt rather than a blank prompt alone.

Convert the process below into a small Mermaid flowchart. Return one Mermaid code block and a short list of any ambiguities. Use flowchart TD, simple ASCII node IDs, quoted labels and labelled Yes/No decision arrows. Represent only the rules supplied. Do not invent steps or policies. Keep labels short enough for a slide. Do not include links, HTML, scripts, icons, directives or external resources. If a rule is ambiguous, ask about it rather than deciding for me.

PROCESS:
[Paste the process here.]