TEXT TO DIAGRAM

Three languages. So many possibilities.

Write connections.
See the picture.

Turn the flows, systems and conversations in your head into something everyone can see. Just a few lines of text.

Start drawing Read the docs

Made right in your browser

Your source stays here. No remote rendering service.

idea.mmdMermaid

01 / SourcePLAIN TEXT

01flowchart LR

02 A[An idea] --> B[Connect the dots]

03 B --> C{Find the form}

04 C --> D[A clear diagram]

05 C --> E[Refine]

06 E --> B

03 / DiagramSVG / PNG

Rendering locally…

MermaidPlantUMLGraphviz

Rendering locally…

Move to explore · Toggle the layer viewTap to explore the layers

03Diagram languages

Mermaid · PlantUML · DOT

25Ready-made templates

From workflows to architecture

SVG / PNGReady to export

For documents, decks and sharing

MITPublic package license

Use independently, integrate freely

ONE WORKSPACE. THREE LANGUAGES.

Every idea deserves a fitting expression.

Start with familiar syntax and a useful example. Your source is always yours to edit.

0110 templates

Flows & ideas

Mermaid

Flowcharts, sequences, mind maps and more. Give everyday ideas a clear shape.

0211 templates

Systems & teams

PlantUML

Use cases, classes, components and deployments. Explain how your system fits together.

034 templates

Nodes & connections

Graphviz

Directed graphs, dependencies and clusters. Let your connections find their place.

Explore every template See what each engine supports

your-app.vueVUE

<script setup>
import { TextDiagramEditor }
  from '@quirekit/text-diagram-editor/vue'
</script>

<template>
  <TextDiagramEditor
    :request="request"
    :title-editable="true"
  />
</template>

Familiar source. Complete control.Complete integration example ↗

ClassicBlockMSFEONE WORKSPACE

MADE TO FIT YOUR APP

One workspace. Your kind of experience.

Focus on your product. Source editing, diagram previews and exports are ready to go.

Open and create

Launch a standalone dialog, edit a diagram, then return to where you were.

Make it part of your UI

Embed the Vue workspace with your own theme, data and save flow.

Take just what you need

Render source directly to SVG / PNG, or use the headless model on its own.

LET IT TAKE SHAPE.

Your next diagram starts with a line.

Pick a template. Make room for your idea.

Start drawing

Write connections.See the picture.