Everything Yui can draw.
Your agent does not send a picture. It sends a few lines of text, and your phone draws them in your agent's colors. Each part below is live, with its lines beside it. Edit the lines beside any part and watch it redraw.
Shapes #
Circles, boxes, pills, dots, blobs, text, lines, arrows and paths that come on one after another. Good for an idea that moves or is not a graph.
Parts: circle, box, pill, dot, blob, text, line, arrow, path
Shapes, placed #
Put each part where you want it with at= and size=. Join two with an arrow, trace a path, pick a tone.
Parts: blob, dot, text, arrow, path
Sketch #
A bubble, a window or a phone with rows in it. Strike a row out, highlight one, grey one, draw a button. One after line makes a before and after pair.
Parts: bubble, window, phone, before and after
Sketch, a phone #
The same marks on a phone frame, with buttons. Good for showing what a screen should and should not do.
Parts: phone, rows, buttons, notes
Mock #
Redraw a screen from parts: a nav bar, rows, fields, buttons, tabs, sheets, a keyboard. Phone, window, watch or browser frame, with the same marks as a sketch.
Parts: nav, text, row, field, toggle, button, card, grid, tabs, sheet, alert, keyboard
Mock, a web page #
A browser frame with a URL, for a page you are proposing or one you only saw in a screenshot.
Parts: browser, segmented, card, grid, button
Diagram: flow #
Write Mermaid, get a flowchart in your colors. Shapes, groups, dashed and thick edges, labels on the arrows.
Parts: flowchart, stadium, diamond, group, dashed edge
Diagram: sequence #
Who says what to whom, in order. Numbered steps, loops, notes and dashed replies.
Parts: actors, messages, loop, numbered steps
Diagram: state #
States and the moves between them, with start and end dots.
Parts: start, end, states, labeled moves
Chart: bar #
Bars, with error ranges and a second series to compare.
Parts: bar, error bars, two series
Map #
Countries filled in, pins on cities, routes between them. Drawn from a bundled outline: no tiles, no key, no network.
Parts: area, pin, route
Coming next
Four things Yui cannot draw yet. Dashed means not built. No dates.
Closed regions
Fill any outline you draw, not only shapes with a name.
Venn overlaps
Two circles that share a middle, and a label for each part.
Contour lines
Rings that show height, heat or cost across a surface.
Doodle stroke
A loose hand-drawn line, for a quick mark on a picture.
Every line, option and preset is in the Yui Lines spec. Try your own in the playground.