Start
Double-click index.html (Edge or Chrome). No install. The first time, a short three-step tour points out Open, the Library pane, and Save as (Esc dismisses it; open it again from How to use ▾ → Quick tour). Then click Open file…, Open sample diagram, or drag a file onto the page: PDF, SVG, HTML page with an SVG drawing inside, Word (.docx) with a picture in it, Visio (.vsdx), PowerPoint (.pptx), draw.io, Mermaid (.mmd), DXF, PNG/JPG screenshot, or a Project (.json) saved by this tool.
Open a sample diagram · Replay the three-step tour
Word files: the tool takes the pictures out of the document. An SVG picture comes in as exact shapes; a PNG/JPG is recognised like a dropped screenshot. Several pictures = several pages (◀ ▶). A Word file saved by this tool re-opens fully editable.
Diagrams produced by an AI assistant usually arrive as an HTML page or a PDF. Both open directly — no conversion.
Always hand the tool the SVG or draw.io when one exists; the picture is the last resort. An SVG, draw.io, HTML-with-SVG or a real PDF comes in as exact shapes and words. A PNG, a screenshot, or a PDF that was printed from a browser is only a picture: the tool has to guess the boxes and read the words back (OCR), and some things — dashed containers, small labels — will be lost or misread. If the print header shows a file name like
…_Data_Flow.svg, go and open that file instead.The screen
| Where | What |
|---|---|
| Title bar | The name and version, Open second document…, Focus, About (a short dialog with support, privacy and terms) and How to use ▾ (the guide, a quick tour, or a sample diagram). Click « on the tools column or a pane's right-hand panel to collapse it (more room for the diagram); click again to bring it back. The tool remembers which panels you hid. |
| Left column | Undo / Redo, a read-out of what is selected, the Library toggle, Open second document…, drawing Tools, and (when the column is expanded) Style, Text and Edit. |
| Middle | Your diagram. Grey around it = outside the page. An empty page says Drop any diagram here, Open file or Open sample diagram, with the formats listed. |
| Right column | Open file…, try a sample, Replace icon, zoom, and two menus: Save as ▾ (PDF, SVG, PNG, JPG, Visio, PowerPoint, draw.io, Mermaid, DXF, Word, Project, and Copy as image) and Page ▾ (Crop page, Make page, orientation, Group icons, recognise pictures, background, recognition debug). |
| Library pane | A second document beside yours — that is its main job. Click Library ◫ or Open second document… (Ctrl+Shift+O). Open any diagram or icon sheet there (including ones whose icons are not in a built-in pack), then drag or Ctrl+C / Ctrl+V shapes into your diagram. The empty Library canvas says Open another diagram here to borrow its icons. |
The pane with the green edge is the active one — the left-column tools act on it. Focus (F11) hides the panels and fills the screen with the active diagram; Exit focus or Esc brings the tools back.
Selecting things
| Do this | To |
|---|---|
| Click | select an item (an icon with its caption, a box, a line…). The read-out top-left names it. |
| Shift + click | add / remove items from the selection. |
| Drag on empty space | box-select everything inside the rectangle. |
| Ctrl + click | pick one icon inside a bigger group (e.g. just the people icon inside a "USERS" wrapper). Plain click takes the whole group. |
| Alt + click | select the shape under a label; Alt+click again cycles through stacked shapes. |
| Ctrl + A | select everything. Esc / click on grey = select nothing. |
Editing
| Do this | How |
|---|---|
| Move | drag. Connectors attached to the item follow. Arrow keys nudge 1 px, Shift+arrows 10 px. |
| Resize | drag the blue square at the bottom-right. Icons keep their proportions; hold Shift to stretch freely. |
| Draw | Line (L), Box (R), Oval (E), Text (T). V returns to Select. |
| Lines | select a line → drag its blue dots to re-route or extend; drop an end on a box to attach it; right-click a line to add a bend; tick arrow for an arrowhead; choose solid / dashed / dotted. |
| Colour / width | the line and fill swatches, no fill, width. |
| Copy a look | select the item that looks right → Copy style (Ctrl+Shift+C). Then select other items → Paste style (Ctrl+Shift+V), or just draw: the next box, oval, line or text uses the copied colour, fill, width, dash, corners and arrows (font, size, bold/italic and colour for text). Works across both panes. |
| Rotate | type degrees in rotate. |
| Duplicate / Delete | Ctrl+D / Delete. |
| Group / Ungroup | Ctrl+G / Ctrl+Shift+G. A group moves, resizes and copies as one. |
| Front / Back | which item draws on top where things overlap. Back fixes "my box covers the icons". |
| Undo / Redo | Ctrl+Z / Ctrl+Y. Everything is undoable. |
| Copy between panes | select → Ctrl+C → click in the other pane → Ctrl+V. Or simply drag across. Several pieces paste as one group. |
Text
| Do this | How |
|---|---|
| Edit words | double-click the text (works inside groups too). Enter = new line, Ctrl+Enter = OK, Esc = cancel. |
| Re-wrap a block | select it and drag the blue corner left or right: the words re-flow to the new width, font size unchanged. |
| Font size | size box in the Text section (shows the selected text's size). |
| Alignment | L / C / R. |
| Tight box | Fit box to text removes empty space around the words. |
| Move a caption only | drag the words (a dashed outline shows on hover) — just the label moves. |
Icons & libraries
The Library is a second document beside yours. Click Library ◫ (one click, even if the tools column is collapsed) or Open second document… in the title bar. Open any file there and drag or copy icons and shapes into your diagram — including icons that are not in any built-in pack. In its right column:
| Control | What |
|---|---|
| Built-in icons dropdown | AWS, Azure, Google Cloud packs (official architecture icons), plus Microsoft Entra, C4 model stencils and Other vendors, and Icons in: <your file> when the file you opened defines its own icons (AI-generated SVG/HTML usually does). |
| jump to category… | go straight to Compute, Networking, Security, Storage… ◀ ▶ page through sheets. |
| find icon… | type part of a name or a short name (lambda, secrets, sql, S3, SQS). Exact matches come first. Results come from all libraries, labelled with source and page. Click a result to jump to it. Show matches as icons (or Enter) lays every match on one sheet so you can compare the AWS, Azure and Google versions side by side. |
| icon sheet (lock) | ticked: the sheet is read-only (you can only drag copies out) and each icon is grouped with its caption. Untick to edit the sheet itself. Any PDF/SVG you open in the Library pane gets the same treatment — your own icon legend, an electrical symbol sheet, a vendor PDF. |
To use an icon: click it, drag it onto your diagram, drop. It arrives as one group (icon + caption). Double-click the caption to rename it; Ctrl+Shift+G to split it.
Missing a pack? Click Request an icon set… in the Library pane. It opens a prefilled email to support asking for the vendor or category, a link to their official icon PDF or page, and what you would use it for.
Adding a permanent pack: drop a PDF into the
libs folder and run libs\build_libs.ps1 once.Replace an icon (the fast way to fix a wrong one)
- In your diagram, click the wrong icon (Ctrl+click if it sits inside a wrapper group).
- In the Library pane, select the right one — via find icon…, a category page, or Ctrl+click inside another diagram you opened there.
- Click Replace icon ◀ library (top of the main pane's column).
The icon changes in place: same position, same size, caption and connectors kept. Ctrl+Z if you picked the wrong one.
Fixing AI-generated diagrams — a routine
- Open the SVG or draw.io if you have it; otherwise the HTML or PDF. Read the yellow status line: it tells you what was found (and how many icon definitions the file carries).
- Make page: choose page: landscape (or portrait / auto) and click. The diagram is cropped to its content, scaled to fit a Letter page in that orientation, and centred — so a slide or Word page never stretches it. On a recognised picture it also cuts the picture to the diagram and removes the browser's print header/footer (date, file name, URL, page number). Crop page is the lighter version: trim only, keep the shape.
- Group icons if icons and captions came in as separate pieces (PDF imports). Ctrl+Z if it guesses wrong.
- Fix wrong icons with Replace icon; fix wording by double-clicking text; re-wrap overflowing blocks by dragging their corner; move things so nothing overlaps.
- Save as PDF. Done — anyone can open it, and it re-opens here fully editable.
A big blue box when you click "empty" space means an invisible background shape slipped through. It is removed automatically on import; if you still see one, drag a box around it and press Delete.
Saving and passing it on
| Save as | Use for |
|---|---|
| the default. Opens anywhere (Acrobat, browser, Teams). Re-opened in this tool it is still fully editable — the editable diagram travels inside the PDF. | |
| SVG | web pages, wikis; also round-trips losslessly. |
| PNG | a picture for slides or email, with a transparent background. Run Make page (landscape) first so it drops onto a 16:9 slide without stretching. |
| JPG | the same picture with a white background (JPEG, quality 0.92), usually a smaller file. Use PNG if you need transparency. |
| Copy as image | puts a PNG of the diagram (white background) on the clipboard — paste into a slide, email or document. If the browser blocks clipboard images (typical when you double-click index.html and it opens as a file:// page), the tool saves a PNG instead and tells you in the yellow status line. |
| Visio | a .vsdx with real shapes and connectors, for colleagues who work in Visio or LibreOffice. Re-opened here it is still fully editable — the editable diagram travels inside the file, like the PDF. |
| PowerPoint | a .pptx with real shapes, connectors, text and pictures on a slide. Re-opened here it is still fully editable — the editable diagram travels inside the file. |
| Mermaid | a .mmd flowchart, for tickets and AI assistants. Re-opened here it is still fully editable. Foreign files: flowcharts only. |
| DXF | a 2-D CAD file (lines, polylines, arcs, circles, text) for AutoCAD or LibreCAD. Re-opened here it is still fully editable. |
| Word | a .docx with the diagram as a high-resolution picture on a Letter page (orientation from the page: picker, auto = whichever fits), for review packets. Keep the PDF/SVG as the editable master — the Word copy is a picture. |
| draw.io | opens in diagrams.net. |
| Project | the raw .json — for backups or hand-off between tool versions. |
Nothing is uploaded anywhere. Files you open and save are ordinary files on your computer or network share.
All keyboard shortcuts
| Key | Action | Key | Action |
|---|---|---|---|
| V L R E T | Select, Line, Box, Oval, Text | Ctrl+Z / Ctrl+Y | Undo / Redo |
| Ctrl+click | pick an icon inside a group | Ctrl+D | Duplicate |
| Shift+click | add to selection | Delete | Delete |
| Alt+click | shape under a label / cycle stacked | Ctrl+G / Ctrl+Shift+G | Group / Ungroup |
| Ctrl+A | select all | Ctrl+C Ctrl+X Ctrl+V | copy / cut / paste (between panes too) |
| Ctrl+Shift+C / Ctrl+Shift+V | copy style / paste style | Tab / Shift+Tab | next / previous item on the page (click the page first) |
| Enter | edit the selected text or line label | F11 | Focus mode (hide panels, fill the screen) |
| Ctrl+Shift+O | Open second document (Library pane + file picker) | ||
| Arrows / Shift+arrows | nudge 1 px / 10 px | Double-click | edit text |
| Right-click a line | add a bend | Shift while resizing | stretch freely (no proportion lock) |
| Enter in find icon… | show matches / jump to the only match | Esc | clear search / cancel dialog |
Support and privacy
Questions or trouble: the webmaster contact is appsupport.pro. The same site has the privacy policy and terms of service. These links also appear in the app's About dialog and as a small Support / Privacy pair on the main status bar. They open in your browser; the tool itself never contacts the network. To ask for a new icon pack, use Request an icon set… in the Library pane (a prefilled email to aiplayground226@gmail.com).