AI Engineering FoundryLoading…
Loading…
Draw flowcharts with start/end, process, decision, input/output, and note shapes, connect them with labelled arrows, and export PNG or SVG. Saved in your browser.
Also covers: Flow chart maker · Flowchart creator · Process diagram maker · Algorithm flowchart
Drag from a shape's edge dot to another shape to connect them. Select a shape or arrow to edit it; Delete removes it. Scroll to zoom, drag the background to pan.
Click a shape or an arrow to edit it.
Loading…
Start/End (rounded), Process (rectangle), Decision (diamond), Input/Output (parallelogram), and Note. Each new shape appears in the middle of the canvas.
Drag from a dot on a shape's edge to another shape to draw an arrow. Select an arrow to label it, such as Yes or No from a decision.
Select a shape to change its text, type, or colour. Download a PNG for slides, an SVG for crisp printing, or JSON to keep editing later.
By convention, rounded shapes mark the start and end, rectangles are steps, diamonds are yes/no decisions with an arrow for each answer, and parallelograms are input or output, such as reading data or printing a result.
Yes, automatically, in this browser's local storage. Nothing is uploaded. Download the JSON file to keep a copy or move it to another device.
Yes. The PNG and SVG redraw the same shapes, line breaks, and arrow paths on a white background, cropped to the chart.
Colour
Pick any colour with a saturation/brightness square, from anywhere on your screen (EyeDropper), or from a photo — and get it in HEX, RGB, HSL, OKLCH and more.
Colour
Convert any colour between HEX, RGB, HSL, HSV, HWB, CMYK, Lab, LCH, OKLab and OKLCH, with the nearest CSS colour name.
Palettes
Build a palette from one colour — a 50–950 shade scale or complementary, analogous, triadic and other harmonies, worked out in OKLCH — and export CSS, Tailwind, SCSS or JSON.
Colour
Pull the main colours out of a photo or logo, with how much of the image each covers, and export them as CSS variables or JSON.
Accessibility
Check text and background colours against WCAG 2.2 AA and AAA, see the exact contrast ratio, and get the closest colour that passes.
CSS
Design linear, radial and conic CSS gradients with any number of colour stops and vivid OKLCH blending, and copy the CSS.