shadcn.io is not affiliated with official shadcn/ui
Diagram Generator AI Block for Vue
Describe a flow, pick a sample or edit the arrows by hand, and a small helper draws the boxes and curves, names a loop or a bad line, and saves a real SVG file.
Installation
Overview
Turn a sentence into a flow chart you can edit, with this diagram generator for Vue with Ark UI. A header names Arrowmill, a diagram helper, and a hairline frame holds two cells. At the start a description Textarea has three sample chips (a sign-up flow, a deploy pipeline, a support triage) and a Generate button that fills the arrow editor below it with typed text, one A --> B line at a time, beside a Native Select for the direction and a Copy Button. At the end the diagram is built from the arrows by a small helper: each unique label becomes a box, boxes are layered by their longest path, and arrows are drawn as curves with the labels in HTML. A line that is not an arrow, a loop, a label that is too long or a thirteenth box is named in a problem line, and the diagram keeps what came before it. The Shine Button, Download SVG, saves a real SVG file. The frame is ruled by Guides.
FAQ
What stays local, and how do I wire it for real?
All of it. Generate only knows the three typed samples and matches them by a few words in your description; anything else tells you so and leaves the arrows alone. The arrows are the real source, parsed and drawn in the page. To make it real, send the description to your model, ask for A --> B lines, and put the answer into the arrow field: the parser, the layout and the SVG export stay as they are.
What can the arrow field hold?
One arrow per line, Start --> Finish, and a chain such as A --> B --> C counts as two arrows. Blank lines and lines starting with # are skipped. Labels are free text up to 28 characters, there are at most 12 boxes, and a box cannot point to itself or back up the chain, since that would make a loop.
What happens when a line is wrong?
The problem line under the field names the line number and what is wrong, in words, and reading stops there: the diagram keeps everything above it. The problem is announced as an alert, and the space is held so the field never jumps.
What does Download SVG save?
A standalone flow.svg with the same boxes and curves, drawn in plain named colours on a white ground so it looks right outside the page. The text is part of the file, so it can be edited in any vector tool.
Is it usable with a keyboard and a screen reader?
Every field is labelled, the sample chips are a named group of buttons, and the drawing itself is hidden from assistive technology and replaced by a list of the arrows ("Run tests to Build image") with the counts. The diagram region scrolls and keeps a fixed height.