Yirinhana Tools

简体中文 · English · Español · Português · 日本語 · Deutsch

Flowchart maker

Flowchart maker. Draw processes, connect decisions and export editable Mermaid, SVG or PNG. Your files stay on this device. Processing happens in your browser.

Enable JavaScript to use the tools. Files are processed in your browser.

Turn a process into a clear flowchart

Start with the example or add an empty node. Give each step a short verb phrase, such as Check request or Send reply. Use a rounded shape for a beginning or an end, a rectangle for an action, a diamond for a decision, and a parallelogram for input or output. The shape selector is available when adding a node and when editing a selected node. The properties panel lets you change text, coordinates and shape; press Apply changes to commit typed edits. Dragging is useful for rough arrangement, while numeric coordinates help line up several steps precisely.

Connect decisions and import a simple Mermaid draft

Choose the source and target in the connection form, add a label where it clarifies the branch, and create the connection. Labels such as Yes and No are especially useful around decisions. Select a connection on the canvas or in the list to update or delete it. A plain flowchart TB or flowchart LR draft can also be pasted into the Mermaid panel. The supported subset includes rectangular, decision, rounded and input shapes, arrow chains, and labeled arrows. Unsupported subgraphs, style statements, click actions and configuration directives produce an error instead of being silently ignored. Import validates the complete draft before replacing the canvas. Use Undo if a valid edit changes the structure unexpectedly.

Keep an editable copy as well as an image

The editor runs in your browser. Diagram content is not sent to a conversion server, and no account is required. Changes are saved in localStorage for this browser and this tool. That is convenient for returning to a draft, but it is not a backup: private browsing, clearing site data, or changing devices can remove access to it. Download the Mermaid file whenever you reach a useful milestone. It contains the diagram structure and a comment with the current node positions. SVG is useful for documents and high resolution printing; PNG is useful for slides and messages. Both contain the diagram itself, without editor controls. Before sharing, open the exported file and check that all labels are readable. Very large PNG exports are rejected with a visible error; move nodes closer together or choose SVG. The ZIP bundle collects a matching PNG, SVG, Mermaid file and JSON model in one download. Use the Mermaid contents when importing back into this editor.

Frequently asked questions

Can I keep editing after exporting?

Yes. The browser keeps the current model, and the downloaded Mermaid text can be imported again. PNG and SVG are intended for sharing the visual result; import the Mermaid file contents to recover editable nodes and connections.

How do I work on a phone or with a keyboard?

The properties panel moves below the canvas on a narrow screen. Select a node from the list, edit its coordinates and apply the change. A focused canvas node can also be moved with arrow keys, or one pixel at a time while holding Shift.

Related tools