Some diagrams are faster to type than to draw. This free text-to-diagram maker uses the open-source Mermaid engine to turn a few lines of plain text into a polished diagram, right in your browser. Write flowchart TD and connect boxes with arrows for a flowchart; switch to a sequence diagram to map messages between systems, a Gantt chart to plan a project, or class and ER diagrams for software and databases.
Pick an example, edit the text, and the picture updates when you press Render. Download the result as a crisp SVG for documents and wikis, or as a PNG for slides and chats. No account, no watermarks, and your text never leaves your device.
How to make a diagram from text
- Start from an example. The five built-in examples are complete, working diagrams. Load one and change the words — that is the fastest way to learn the syntax.
- Edit one line at a time. Each line is one box, one arrow or one task. Press Render after each change while you are learning; the error message names the line that broke.
- Download and share. SVG stays sharp at any size and suits documentation. PNG is better for presentations, social posts and anywhere SVG is not accepted.
The five diagram types, in plain words
Flowchart — steps and decisions: processes, troubleshooting guides, onboarding flows. Boxes are steps, diamonds are questions, arrows show the order. Sequence diagram — who says what to whom, in time order: perfect for API calls, login flows and payment checkouts. Gantt chart — a project plan on a calendar: tasks, durations, milestones and what depends on what. Class diagram — the blueprint of object-oriented software: classes, their fields and how they inherit. ER diagram — database tables and the relationships between them, the map every backend project starts with.
Writing your first flowchart
Three ideas cover most flowcharts. A box is A[Text], a decision diamond is B{Question?}, and an arrow is –>, optionally with a label: B –>|Yes| C. TD after the word flowchart means top-down layout; try LR for left-to-right when the chart goes into a wide slide. Keep labels short — two to five words — and let the article or document around the diagram carry the detail. If Mermaid reports a parse error, it is almost always an unclosed bracket or a special character like a parenthesis inside a label; put quotes around labels that contain punctuation.
Text or drag-and-drop?
Typing wins when the diagram lives in documentation, wikis or code — the text can be versioned, diffed and regenerated, and editing a label never means re-drawing boxes. Drag-and-drop wins for freeform whiteboard sketches. If you prefer the mouse, try our Interactive Flowchart Creator; if your diagrams live in docs and READMEs, the text approach on this page will feel faster within ten minutes.
More diagram types you can type
The same one-line-at-a-time idea covers several other shapes, and the maker recognises them automatically from the first line. Start with pie for a labelled pie chart of simple numbers. Start with userJourney to map how a customer feels through a signup or checkout, step by scored step. A stateDiagram-v2 describes anything with states and transitions — an order that goes pending, paid, shipped, delivered. A mindmap grows a topic tree from indented lines, the quickest way to turn meeting notes into a visual outline. And gitGraph draws Git branch diagrams for tutorials and release plans. Each type has one job; picking the right one is most of diagramming.
Private and free
The Mermaid engine runs entirely in your browser. Your diagram text is never uploaded, saved or tracked, and this page makes nothing of yours public. The downloads are generated on your device too.
Related tools
Creador de Diagramas de Texto — versión en español · Interactive Flowchart Creator · Screenshot Beautifier.
Embed this tool on your website — free
Copy the code below to add this working tool to your own page. A small credit link stays with it — that’s all we ask.