How to use the flowchart & diagram maker
- Press the example button (Flowchart, Sequence, Schedule, Class and so on) that is closest to what you want. The example text fills the left box and the drawing appears on the right at once.
- Change the names and arrows in the left text to your own content. A moment after each edit the drawing is redrawn.
- To change the look, pick one of Default, Green, Gray or Dark under the drawing.
- When you are happy, press Save PNG or Save SVG to get a file. To edit it later, use Copy text and keep the text somewhere safe.
How text turns into a drawing
You describe boxes and arrows as short lines such as "A --> B", and the tool reads that text and works out where each box goes and how each line is routed. Instead of dragging boxes with a mouse and lining up connectors, you only write what connects to what, so changing one line of text rearranges the whole layout for you.
The drawing is made as scalable vector graphics that stay sharp when enlarged, and everything is processed inside this page. What you type is never sent out, so work flows or personal plans you would rather not expose can be drawn with peace of mind.
What can you draw
Flowcharts are the most common choice for work procedures or decisions with yes/no branches. Sequence diagrams show in what order several parties such as a user, an app and a server exchange messages, so they often appear in developer documents and work manuals.
A schedule (Gantt) draws bars when you give each task a start date and length. You can also write order relations such as "starts after the previous task", which is handy for sharing a small project or study plan. Class, state and ER diagrams explain the structure of programs and data, a pie chart shows proportions at a glance, and a mind map suits spreading thoughts out like branches.
Because the text, not the picture file, is the original, it is easy to keep in a notepad or document and change one line later before saving again. You avoid the trouble of redrawing from scratch when you only have an image left.
When content grows long, it reads better as several drawings in steps than one huge one. Once a drawing has more than about ten boxes, viewers easily lose the flow.
Tips for good drawings
- Always write the kind of drawing on the first line. Without it nothing is drawn.
- If a box name contains spaces or parentheses, wrap it in square brackets [ ].
- When an error appears, undo from the line you edited last. The cause is usually there.
- Use SVG for blogs and documents so lines stay sharp, and PNG for chat apps.
- For slides with a dark background, try the transparent PNG option together with the Dark theme.
FAQ
How do I write text so a drawing appears?
Start the first line with the kind of drawing (words such as flowchart TD, sequenceDiagram or gantt) and write connections like "A --> B" below it. The fastest way is to press an example button and change the text bit by bit.
A red message appears and no drawing is shown.
Usually the first line names an unknown kind, brackets or quotes are unmatched, or the indentation is off. Check near the line mentioned in the message first. If a name contains spaces, put it inside square brackets [ ].
Should I save as PNG or SVG?
SVG stays sharp when enlarged, so it suits documents and slides. PNG is easier for chat apps and blogs. If the PNG looks blurry, raise the scale to 2x or 3x.
Is my text saved?
No. It is neither sent to a server nor kept in your browser. Use Copy text to keep what you need.
Does it work with Korean text?
Yes. Korean names and labels can be drawn. Because it uses fonts installed on your device, the lettering in PNG and SVG files can look slightly different from device to device.
Notes & limitations
This tool is meant for drawing simple diagrams quickly, and very large diagrams with many boxes may be laid out awkwardly. What you type is processed only in your browser and is never sent or stored. BTSPACE WAGLE is an unofficial information site. To turn table data into a graph, also try the Chart Maker.