How to use Graph Manufacture

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. Example loads the example of the current 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 or .txt. The format is recognised from the content.
• ExportSource file, SVG, PNG, HTML and PDF, see Exporting.
• ViewShapes 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.
• FeedbackOpens an email to us. It never includes your diagram unless you write it in yourself.

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 view): packages, definitions, parts, ports, attributes, connections, requirements. It is drawn as a graph. 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.
• 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.
• Draw an arrowClick a shape. A round handle appears on its right side. Drag the handle onto another shape.
• 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.

• Source fileSaves your text with the right extension for the format (.mmd, .puml, .dot, .sysml, .drawio).
• 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, Source file 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.
• OfflineAfter the editor has loaded, it works without internet. Open each format once before going offline so that its renderer is loaded.

On a Mac, use ⌘ instead of Ctrl.