How to use Stormtoplan

1. Open the editor. It starts with an example, so you see a drawing right away.
2. Choose a Format in the top bar: Mermaid, PlantUML, Graphviz / DOT, SysML v2 or draw.io.
3. Type or paste your diagram text on the left. The drawing on the right updates as you type. A line under the editor says OK, or shows what is wrong.
4. Pick a starting point with New, Templates if you do not want to begin from an empty page.
5. Save your work with Export, Source file, or export the picture as SVG, PNG, HTML or PDF.

You can open the editor straight in a format with a link such as app.html?format=plantuml. The valid names are mermaid, plantuml, graphviz, sysml and drawio.

The window has three areas: the text on the left, the drawing in the middle, and a shapes panel on the right.

• FormatSwitches the diagram language. Your text is converted when a conversion exists, see Converting.
• Undo, RedoStep back and forward through your changes, including conversions, templates, opened files, and everything drawn with the mouse.
• NewTemplates opens a gallery of ready-made diagrams for every format. Clear asks first: Clear this diagram empties the editor and can be undone, Clear everything also deletes the saved texts of all formats and cannot be undone.
• Open fileLoads a diagram file: .mmd, .mermaid, .puml, .plantuml, .pu, .dot, .gv, .sysml, .drawio, .xml, .txt or Markdown (.md). The format is recognised from the content. In a Markdown file the mermaid, plantuml, dot and sysml code blocks are found; pick one to edit, and Export, Source file writes it back into the Markdown text.
• TabsThe bar above the text holds several diagrams, each with its own format. + (or Alt + N) adds an empty one, a double-click (or F2) renames a tab, × closes it. Drag a tab left or right (or press Alt + arrow keys on it) to change the order. The tabs are kept in this browser. Undo starts over when you switch tabs.
• SuggestionsCtrl + Space in the text lists keywords and ready-made snippets for the current format that start with the word before the cursor.
• FindThe search field at the top left of the drawing (Ctrl + F) highlights every label that contains your text and centres the drawing on the current match. The highlight is not part of exports.
• ExportSource file, Backup of everything, Auto-save to a file, SVG, PNG, HTML and PDF, see Exporting.
• PresentationView, Presentation mode (or P) goes fullscreen with only the drawing; zoom with the wheel or + −, pan by dragging or with the arrow keys, leave with Esc.
• View menuShapes panel shows or hides the right side. Hide editor panel hides the left side so only the drawing is shown. Invert preview colors turns the preview dark; this only changes the display, exports keep their colors.
• FeedbackQuick feedback opens a small form in a new tab and sends your message straight to us; only what you type is sent, never your diagram. Email feedback opens your email program instead.

The divider between the text and the drawing can be dragged, moved with the arrow keys when it has the focus, and reset with a double-click. The divider in front of the shapes panel works the same way. The sizes are remembered.

In the preview, use the mouse wheel to zoom, drag the background to move the view, and double-click the background (or press 0, or use Fit) to reset it. The buttons + and − zoom as well.

• MermaidFlowcharts, sequence, class, state, ER, Gantt, mind maps and more. Files: .mmd, .mermaid.
• PlantUMLSequence, class, activity, state, use case, component, Gantt, mind map, WBS and more. Files: .puml, .plantuml, .pu. The renderer loads the first time you use it, so the first drawing takes a moment.
• Graphviz / DOTGraphs written in the DOT language. Files: .dot, .gv.
• SysML v2A practical subset of the textual notation. Structure: packages (their doc is shown as a note), definitions, parts, ports, attributes with values, constraints with their expression, connections, requirements. Behaviour: action flows (first, then, succession, decide, merge, fork, join, if / else, accept, send, start, done) and state machines (entry; then, states, transition … accept … if … do … then, entry / do / exit actions). Use cases with subject, actors and include. Actions and states with an inner flow are drawn as frames. Files: .sysml.
• draw.ioOpens .drawio and .xml files, including compressed pages. The preview is simplified, see Drawing in draw.io. Only the first page of a file is shown.

Change the format and your diagram is converted on the spot.

• What you seeA note under the editor says what happened. If something could not be carried over, Show what was not carried over lists every such line with its line number and the reason.
• RevertThe Revert button in the note, or simply switching straight back, restores your original text exactly. Undo works as well.
• Several stepsWhen there is no direct route (for example PlantUML to draw.io) the conversion runs in steps. The steps in between are hidden, and the loss list covers all of them.
• RefusalsSome diagrams have no counterpart, for example a Gantt chart cannot become a graph. The editor then explains why instead of guessing, and your text stays as it is.
• Your own textIf the editor only shows an example or template and the other format already holds text you wrote, that text is loaded instead of converting the example.

The table What can be converted into what on the start page shows every combination. Converted results are provided as is, so check the preview and the list before relying on them.

In draw.io you can draw with the mouse. The result is written into the draw.io text, so every step can be undone.

• Add a shapeDrag a shape from the panel on the right into the drawing, or click it. Box, rounded box, decision, ellipse, database, text and swimlane are available. A text box opens at once so you can type. The panel is folded: sections such as UML, SysML or Organization hold groups that open one at a time, and Collapse all at the top closes everything again. What you opened is remembered.
• Type textDouble-click a shape or an arrow. Enter saves, Shift + Enter starts a new line, Esc cancels.
• Move a shapeDrag it. The arrows follow, and the new position is saved in the text. A swimlane takes the shapes inside it along, and so do the corners of arrows that run entirely inside it. An arrow keeps hold of its own shapes and does not jump onto others.
• Draw an arrowClick a shape. A round handle appears on its right side. Drag the handle onto another shape.
• Where an arrow attachesSelect an arrow and drag one of its two end circles onto a shape: the end is fixed at the place where you let go, on the nearest edge of the shape, in steps of 5 percent of the side. Hold Alt to place it exactly, hold Shift to let the arrow choose its place again. Changing the kind of arrow keeps the places.
• CornersSelect an arrow, then drag the line itself to pull out a corner there (or drag one of the small circles halfway along each piece). Drag a filled square to move a corner (grid of 5, hold Alt for exact), click it to remove it. Undo takes each step back.
• Select an arrowClick right on the arrow's line (a thin line is easy to grab) or on its label. The panel then shows Selected arrow with the buttons below.
• Reverse direction⇄ Reverse direction in the panel swaps start and end, so the arrow points the other way. The arrow heads stay where they are, and the attach places swap with the ends.
• Corner styleSharp, Rounded or Curve in the panel sets how the arrow runs through its corners.
• Front and backSelect a shape or arrow, then use To front, Forward, Backward or To back in the shapes panel to decide what lies in front of what. One step forward or back passes the next shape that overlaps it. Parts inside a shape (a class's compartments, shapes in a container) move with it. New arrows start behind their shapes.
• Move with the keysSelect a shape and press the arrow keys: one press moves it 10 units, with Shift 1 unit. The arrows follow, as when dragging.
• DeleteSelect a shape or arrow and press Del. Arrows attached to a deleted shape go with it.

In the other formats the text decides how the diagram looks, so the panel only explains this and offers Switch to draw.io, which converts your diagram. You can still drag boxes in the drawing of Mermaid, PlantUML, Graphviz and SysML to look at them differently. Those moves are for viewing and exporting only and are lost when you change the text.

The draw.io preview is a simplified drawing of the common shapes and connectors, not the full draw.io renderer. Images and special shape libraries are approximated, and the status line says when that happens. For everything else, open the file in draw.io.

Write requirements next to the diagram they belong to. A diagram can hold several tables, each with a heading. Every requirement has a four-digit ID (0001, 0002, …) that is unique across all your diagrams (tabs).

• New tableRequirements › New requirement table… opens a small form: type a heading and the requirements, + Add requirement adds a row with the next free ID. Empty rows are dropped, Ctrl + Enter saves.
• Change a tableDouble-click the table in the preview. Delete table removes it; Undo takes every change back.
• In the textIn Mermaid, PlantUML, Graphviz and SysML a table is a block of comment lines, so the file stays valid in every other tool. You can also type them yourself: %% @reqtable Braking and %% @req 0001 The car shall stop. (PlantUML ', Graphviz and SysML // instead of %%). The editor draws the tables below the diagram.
• In draw.ioThe table is a shape of its own: drag it to place it. It is stored as an HTML table, so diagrams.net shows it as a table too.
• ChecksAn ID used twice, or a requirement without an ID, is marked red and named in the status line. Opening the table and saving gives missing IDs the next free number.
• ConvertingTables go along when you switch the format.
• DocumentRequirements › Requirements document (.md) saves one Markdown file with the tables of all your diagrams, one section per tab.
• Export for AIRequirements › Export for AI saves SPEC.md for a coding AI such as Claude Code: instructions, every diagram as code, the requirements as REQ-0001 … (so they can be found in code and tests) and a checklist. If some diagrams are in draw.io, a dialog first offers to convert them to Mermaid or PlantUML for the file (a coding AI reads those much better than draw.io XML); your tabs stay unchanged. Put the file into your repository and tell the AI "Implement SPEC.md".

• Source fileAsks for a file name (remembered per format) and saves your text with the right extension for the format (.mmd, .puml, .dot, .sysml, .drawio).
• Backup of everythingSaves all tabs, with their names and formats, in one .json file. Open file on that file restores the tabs (after asking, because it replaces the current ones).
• Auto-save to a fileIn Chrome and Edge you can pick one file once; from then on the editor keeps it up to date after every change, without asking again. After a browser restart the browser asks once for permission, then press Continue. The file stays on your device, nothing is sent anywhere. Other browsers cannot do this; use the backup instead. Careful: the file always mirrors the current state, so after Clear everything it is overwritten with the empty state. Keep a dated backup for anything precious.
• WatermarkSVG, PNG and HTML exports carry a small Made with Stormtoplan in the bottom-right corner. The drawing in the editor stays clean.
• SVGThe drawing as a vector image, as shown, including boxes you moved for viewing.
• PNGThe drawing as a picture.
• HTMLA single page that contains the drawing and works without any other file.
• PDFOpens the print dialog showing only the drawing. Choose Save as PDF as the printer.

• Where your text livesIn your browser, in its local storage, separately for each format. It is there when you come back, on the same browser and device.
• Not a backupClearing your browser data, private windows and some browser settings remove it. Use Export, Backup of everything (all tabs), Auto-save to a file or Export, Source file (one diagram) for anything you want to keep.
• Nothing is uploadedDrawing and converting run in your browser, and the page is not allowed to open connections to other servers. See the privacy policy for what the web host itself sees.
• OfflineOn stormtoplan.com the browser keeps an offline copy of the program files (a service worker). After the first visit the editor opens without internet, with every format. It only stores Stormtoplan's own files, never your diagrams.
• iPad and iPhoneIn Safari tap Share, then Add to Home Screen. Stormtoplan then opens like an app, full screen and offline. Two fingers zoom the drawing. One finger moves it; in draw.io only on an empty place, because there one finger on a shape moves that shape. With a hardware keyboard the shortcuts below work with ⌘. On a phone, Code and Diagram in the header switch between the text and the drawing. On narrow screens Shapes (top right of the preview, draw.io only) shows the shapes as a slim strip on the right: tap a shape to add it, or drag it into the drawing. Tap a shape or an arrow to select it: at the bottom left of the preview, Text lets you type its label and Delete removes it (Undo brings it back). The squares, the round arrow handle and the end points of an arrow are drawn larger for fingers, and pressing just beside one is enough. Putting a second finger down while you move or resize something gives that up without changing the drawing, and the two fingers zoom. Tap an empty place to let go of the selection; moving or zooming the view keeps it.

On a Mac, use ⌘ instead of Ctrl.