Mermaid is a popular text-based diagramming language. You describe your diagram in plain text and it's rendered as an SVG — no dragging shapes, no lock-in. MyToolsBag uses the official Mermaid engine.

What diagrams can I make?

Flowcharts, sequence diagrams, class diagrams, Gantt charts, pie charts, state diagrams, entity-relationship diagrams and more.

Can I export the diagram?

Yes. Download the result as a scalable SVG or a high-resolution PNG image.

Is my diagram private?

Yes. Rendering happens 100% in your browser — your source text never leaves your device.

Do I need to know Mermaid syntax?

No. Start from a built-in template for each diagram type — flowchart, sequence, Gantt — and tweak the labels. The syntax is minimal and reads like English.

Which shapes are supported in flowcharts?

Rectangles, rounded rectangles, stadiums, subroutines, cylinders, circles, rhombuses (decisions), hexagons, parallelograms and trapezoids — all through Mermaid's shape syntax.

Can I embed a Mermaid diagram in Markdown?

Yes. GitHub, GitLab and most modern Markdown renderers support Mermaid inside a ```mermaid fenced code block — paste your source directly.

Can I edit the exported SVG?

Yes. The SVG opens cleanly in Figma, Illustrator and Inkscape — every node and label is an editable vector element.

Does the tool work on phones?

Yes. The editor and preview stack vertically on mobile so you can build and export diagrams from any device.

Online Flowchart Generator & Flow Chart Maker

Turn plain text into flowcharts, sequence diagrams, Gantt charts and more using Mermaid syntax. Live preview and PNG / SVG export.

Load example:

Mermaid source

Live preview

How to Use the Flowchart Generator

Pick a diagram type or start typing Mermaid syntax.
Watch the preview update live as you edit.
Export as SVG (crisp / editable) or PNG (shareable image).

Mermaid cheat sheet

flowchart TD           Top-Down flowchart (LR / RL / BT also work)
  A[Rectangle]         Node with rectangle shape
  B(Rounded)           Rounded rectangle
  C{Decision}          Diamond (decision)
  D((Circle))          Circle
  A --> B              Arrow
  A -- label --> B     Labeled arrow
  A -.-> B             Dotted arrow
  A ==> B              Thick arrow

Free Online Flowchart Maker — No Signup

This is a free flowchart maker that turns plain text into a diagram as you type. Instead of dragging boxes around a canvas and fighting with connector lines, you describe the steps (A --> B) and the layout engine positions everything for you. Change one line and the whole chart re-flows in place.

It handles the diagram types most people need at work: process flowcharts, decision trees with yes/no branches, sequence diagrams for API calls, class diagrams, state machines, entity-relationship diagrams, user journeys, pie charts and Gantt timelines. Each one uses the same Mermaid syntax, so learning one gets you the rest.

Nothing is uploaded. The diagram renders in your browser and exports as SVG or PNG, so it can go straight into a doc, a slide deck, a README or a ticket. Because the source is just text, you can also paste it into a pull request and version it alongside your code.

Flow Chart Creator for Processes and Decision Trees

A good flow chart creator should get out of your way. Start from one of the built-in examples, replace the labels with your own steps, and add a decision point with curly braces: B{Approved?} -- Yes --> C[Ship]. Diamonds, arrows and spacing are handled automatically.

Common uses: onboarding and approval processes, customer support escalation paths, troubleshooting guides, CI/CD pipelines, checkout funnels and org charts. For freehand sketching instead, the paint tool gives you a blank canvas.

Frequently Asked Questions

Related tools

Paint Markdown Editor QR Code Generator