Flowchart Diagram Generator

Flowcharts are one of the fastest ways to communicate a process — a signup flow, an approval chain, a decision tree — without reaching for a full diagramming application. Mermaid, the popular open-source diagram-as-text project, made a particular syntax for this widely familiar: `A[Start] --> B[End]` reads almost like plain English and is easy to write directly in a text file or a Markdown document. This tool borrows that same familiar, readable syntax for its input format, but it is important to be upfront about what it actually is: a small, hand-rolled, flowchart-only renderer built without any external diagramming library, not the full Mermaid.js package. In keeping with this site's approach of avoiding new JavaScript dependencies for every widget — the same reasoning that led the YAML and HTML formatters to hand-roll their own lightweight parsers rather than bundle a full library — this tool implements just enough of Mermaid's flowchart syntax to be genuinely useful for simple diagrams, entirely in vanilla JavaScript. The input format supports one edge definition per line: `NodeId[Label text] --> OtherId[Label text]`. The bracketed label is optional on any line where a node has already been given a label earlier in the document — so once you've written `A[Start]` on one line, a later line can simply reference `A --> B` without repeating the label, exactly like referring back to something you've already introduced. An optional first line sets the overall direction: `graph TD` or `flowchart TD` for a top-down layout (each level of the flow becomes a horizontal row, read top to bottom), or `graph LR`/`flowchart LR` for a left-to-right layout (each level becomes a vertical column, read left to right). If you omit the direction line entirely, the tool defaults to top-down, matching Mermaid's own default behavior. Laying a graph out automatically requires deciding how far "down the flow" each node sits, and this tool does that with a longest-path level assignment: every node starts at level 0, and then the tool repeatedly walks every edge, pushing a node's level to one more than its source node's level whenever that would increase it. This is a simple, well-understood technique (essentially a longest-path relaxation over a directed graph) that naturally handles diagrams where a node has multiple incoming paths of different lengths — it always ends up placed after the longest chain that leads to it, which produces a visually sensible layered diagram rather than overlapping nodes. Because a genuine cycle (A leading back to B leading back to A) would make "the longest path" undefined and could loop forever, the relaxation pass is capped at a small, fixed number of iterations tied to the number of nodes in the graph; if levels are still changing once that cap is reached, the tool concludes the graph contains a cycle and shows a friendly "Cycles are not supported" message instead of hanging the page. Once every node has a level, nodes are grouped into rows (top-down) or columns (left-right), spaced out based on how many nodes share that level and how wide each node's label makes its box. The diagram itself is built as real, inline SVG — rounded-rectangle boxes for nodes, straight connecting lines with arrowhead markers for edges — assembled directly as SVG markup strings in JavaScript. Every label is HTML/XML-escaped before being inserted into that markup, the same self-XSS-prevention discipline used across every text-rendering tool on this site, so a node label containing angle brackets or ampersands can never be interpreted as markup. The finished diagram can be downloaded as a standalone `.svg` file, which — unlike a raster PNG — stays crisp at any zoom level and can be dropped straight into a slide deck, a wiki page, or further edited in a vector graphics tool.