Skip to content
Diagramly
Sign in

AI diagram generator from text or images

Turn a description, screenshot or whiteboard photo into an editable diagram.

Add your input in Step 1, choose its output in Step 2, then generate.

1Add text or an image

Add text, an image, or both. At least one is required.

Text alone works. You can also add instructions for an image.

Add an image (optional)

Drag an image here or paste from your clipboard

PNG, JPEG or WebP · Up to 5 MB

Try an example

2Output format

Applies to the text or image you add in Step 1.

Output format

Selected: Sequence · ZenUML

Review and refine the result in the editor.

Add an image or text to continue

Editable diagrams. Your choice of format. Room to refine.

What can I edit after AI generates a diagram?

Change labels and structure, refine with AI, and keep the source for future updates.

The Diagramly editor with the CI/CD flowchart open: the rendered diagram next to its Mermaid source and the AI chat.

Screenshot of the Diagramly editor with the generated CI/CD flowchart open.

Editable diagrams you can maintain

  • Edit labels and connections

    Change steps, names and relationships. Use source code in code-based formats.

  • Ask AI for a specific change

    Try: “Add a validation step before payment.” Review the updated diagram, then refine it.

  • Keep earlier versions

    Return to saved versions as your diagram changes. Version history limits depend on your plan.

Which type of diagram should I choose?

Choose by what you need to explain: a process, an interaction, a structure, or an idea.

Need a visual canvas? Choose Draw.io for structured shapes, or Excalidraw for a sketch-style canvas. Also available: Gantt charts, use case diagrams and Graphviz graphs.

How to create a diagram from text or an image

Start with words, an image, or both. Then choose your format and review the result.

1Describe a diagram or add an image

List steps, actors or relationships in plain language. Or upload a PNG, JPEG or WebP diagram image. Text alone, image alone and both together work.

2Choose the diagram type and format

Use a flowchart for a process, a sequence for an interaction, or a class diagram for structure. Pick a code-based format or a visual canvas according to how you want to edit.

3Generate the first draft with AI

Generate the diagram from the input you provided. AI creates a working draft; check its labels and connections against your input.

4Review, edit and download

Check names, arrows and missing details. Refine with AI or the source / visual editor. Download source for future edits or use the download available for your diagram type.

lamp-sketch.webp
Image example

Your image

A hand-drawn flowchart on lined paper: Lamp doesn't work, then two yes/no questions leading to Plug in lamp, Replace bulb or Repair lamp.

Generated · Mermaid flowchart

Mermaid flowchart generated from the hand-drawn lamp troubleshooting sketch: plug in the lamp, replace the bulb, or repair the lamp.

Image added. Choose your output format.

View Mermaid source
flowchart TD

A([Lamp doesn't work]) --> B{Lamp plugged in?}
B -->|No| C[Plug in lamp]
B -->|Yes| D{Bulb burned out?}
D -->|Yes| E[Replace bulb]
D -->|No| F[Repair lamp]
Open this example

Opening it saves a private copy in your diagrams.

Real example: the image on the left went through Diagramly and the result on the right was drawn by the Mermaid renderer.

AI output needs review: check names, connections and any details missing from the input.

Diagrams from screenshots, notes and whiteboards

Recover an editable draft, explain a system, or update an existing process.

Only have a screenshot?

Use the image as a starting point for an editable draft. Check its labels and connections before making changes.

Hand-drawn sketch

A hand-drawn lamp troubleshooting flowchart on lined paper.

Editable draft · Mermaid

Mermaid flowchart generated from the hand-drawn lamp troubleshooting sketch: plug in the lamp, replace the bulb, or repair the lamp.
View Mermaid source
flowchart TD

A([Lamp doesn't work]) --> B{Lamp plugged in?}
B -->|No| C[Plug in lamp]
B -->|Yes| D{Bulb burned out?}
D -->|Yes| E[Replace bulb]
D -->|No| F[Repair lamp]
Open this example

Opening it saves a private copy in your diagrams.

Real example from a photo of a sketch. Check the labels and connections before you rely on it.

Digitize a whiteboard

Photograph a meeting sketch. Refine its steps and connections.

Photo → editable flow

Explain a system from notes

Describe its services and interactions. Create a diagram for your documentation.

Notes → sequence diagram

Update a changing process

Open a saved diagram and ask AI to add a step or change a branch.

Saved diagram → revised version

What can I create? Try these diagram examples

Start with a concrete prompt. Generate the diagram, then change the source or ask AI to refine it.

Previews are real renders of AI-generated source for these prompts

Flowchart of a CI/CD pipeline: Commit, Build, Test; when tests pass the pipeline deploys, when they fail it sends a notification and stops.

Mermaid · Flowchart

CI/CD release pipeline

“CI/CD release pipeline: commit, build, test and deploy, and stop with a notification when the tests fail.”

View Mermaid source
flowchart TD

A[Commit] --> B[Build]
B --> C[Test]
C -->|Tests pass| D[Deploy]
C -->|Tests fail| E[Notify and Stop]
Open this example

Opening it saves a private copy in your diagrams.

Sequence diagram of an OAuth login: the browser logs in to the API, which validates the token with the Auth server and creates a session.

ZenUML · Sequence

OAuth login sequence

“OAuth login between Browser, API and Auth server: the browser logs in, the API validates the token with the Auth server, and a session is created.”

View ZenUML source
title OAuth Login
Browser->API.login() {
  API->"Auth Server".validateToken() {
    return tokenValid
  }
  API->API.createSession()
}
Open this example

Opening it saves a private copy in your diagrams.

Class diagram of an order service: an Order holds one or more LineItems, has a total Money amount, and each LineItem refers to a Product and a quantity.

PlantUML · Class

Order service classes

“Class diagram for an order service: an Order with a total Money amount holds one or more LineItems, and each LineItem has a product and a quantity.”

View PlantUML source
@startuml
class Order {
  -total : Money
}

class LineItem {
  -product : Product
  -quantity : int
}

class Product {
}

class Money {
}

Order "1" *-- "1..*" LineItem : holds
LineItem --> "1" Product
Order --> "1" Money
@enduml
Open this example

Opening it saves a private copy in your diagrams.

AI diagram generator questions, answered

Inputs, editing, accuracy, privacy and cost. Get the details before you generate.

More questions? Visit our docs
Do I need both text and an image?

No. Describe a diagram in words, add an image, or use both. Text alone and image alone both work. Provide at least one before generating. An image can be clarified with text, but extra text is optional.

Which diagram types and formats are supported?

Use ZenUML for sequences; Mermaid for flowcharts and Gantt; PlantUML for class and use case diagrams; Markmap for mind maps; and Graphviz for graphs. Draw.io and Excalidraw offer visual canvases. Select a format before generating.

Which image formats work, and how do I get better results?

Upload PNG, JPEG or WebP. Keep labels readable and show complete arrows and connections. A clear screenshot or whiteboard photo is a better starting point than a cropped, blurry image. Add text to clarify ambiguous labels.

How can I edit an AI-generated diagram?

Edit source in code-based formats, or use the visual canvas for Draw.io and Excalidraw. You can also ask AI for changes, such as adding a step or renaming a service. Review each change; saved versions are available within your plan limits.

Will the result match my image exactly?

Treat the result as a new editable draft. Review the labels, connections, ordering and layout against your original. Clarify anything missing with text, then refine the source or ask AI to change the diagram.

Can I keep my diagrams private?

Yes. Diagrams can be public or private, and visibility can be changed in the editor. The number of private diagrams you can keep depends on your plan. See Pricing for the current limits and choose visibility before sharing a diagram.

Compare plans and limits
Is Diagramly free to use?

Diagramly has a Free plan with AI usage allowances. Sign in to generate a diagram. Model access, generation allowances, version history and private diagram limits depend on your plan. Check Pricing for the current allowances and features of each plan.

Compare plans and limits
What can I download after creating a diagram?

Download the source when you need to edit the file later. Most current diagram renderers download PNG. Draw.io exports its editable .drawio file. The available download depends on the format you choose in the editor.

Ready to create your editable diagram?

Describe a process, paste diagram text, or add an image. Choose a format and generate your first draft.

Start with text, an image, or both. Refine the result in the editor.