Start from scratch or import Mermaid
Use built-in shapes, open a sample, or import a Mermaid flowchart.
Optional Mermaid import LIVE DEMO
What happens when a payment fails?
One payment. Two paths. Your call.
What does the provider return?
Choose a payment outcome to see which path the checkout follows.
193 built-in shapes.Engineering & planning built inPNG, PDF & MP4 ready to shareMermaid when you need it
Draw the system.
Show how it works.
Move shapes without redrawing lines
Resize, recolor, and rearrange shapes. Connectors follow as you move them.
Smart connectors · Undo & redoAdd walkthroughs and branching scenarios
Guide viewers through a process step by step, or let them choose what happens next. Export a walkthrough as an MP4.
Shape libraries for
engineering and software
Use 138 symbols across six engineering disciplines, plus 38 software components.
- 138 engineering symbols
- 6 engineering disciplines
- 38 software components
Electrical
28 shapesMap circuits, power and control systems with components, named pins and wire junctions.
Mechanical
20 shapesConnect drives, actuators and fluid equipment to explain how a mechanism works.
Process
25 shapesBuild process flows with vessels, heat exchangers, valves and instrument loops.
Industrial
20 shapesShow production cells, material handling, inspection and manufacturing flow.
Civil
21 shapesExplain drainage networks, transport infrastructure, earthworks and structures.
Architecture
24 shapesPlan spaces and circulation with doors, stairs, rooms, walls and furniture.
What you can build
with Hanila
Map software architecture, explain engineering systems, show project dependencies, or build a lesson people can explore.
Show how requests move through your system
Map the services a request touches, show where it can fail, and walk your team through what happens next.
- Service maps and API flows
- Architecture reviews and design decisions
- Failure paths and incident explainers
Architecture, without the guesswork
Make every connection count.
Give technical ideas a shared visual language. Connect electrical, mechanical, process, industrial, civil, and architectural systems with dedicated symbols and named ports.
- Electrical component and wiring documentation
- Process loops and manufacturing flows
- Drainage networks and architectural space plans
Designed for a closer look
Give your next big thing a clear path.
Connect tasks to milestones, make dependencies visible, and show how the work comes together before the details get lost in a document.
- Task dependencies and project phases
- Milestones, owners, and due dates
- Launch plans you can walk people through
From what’s next to what’s done
Let the lightbulb moment happen.
Teach one connection at a time. Focus attention, ask a question, and let your audience explore the consequences of their answer.
- Interactive system and process lessons
- Team onboarding and knowledge sharing
- Captioned walkthroughs and explainer videos
Less “any questions?” More “got it.”
From a first sketch
to a story people follow.
01
Start a diagram
Start with shapes, open a sample system, or import a Mermaid flowchart.
02
Connect and label shapes
Arrange the pieces. Add context, color, and the connections that matter.
03
Add a walkthrough or scenario
Guide viewers step by step, or add a question so they choose a path.
04
Export your work
Share an image, a PDF, editable Mermaid, or a browser-rendered MP4.
Your boards save in this browser. Export a Hanila JSON file to keep the shapes, layout, and walkthrough together.
Questions about Hanila.
Shapes, walkthroughs, local saving, and export formats.
What is Hanila?
Hanila is a web-based diagram editor for turning connected ideas into editable diagrams, interactive scenarios, and animated walkthroughs. Build directly on the canvas, choose a sample system, or optionally import a Mermaid flowchart.
Which engineering disciplines have shape libraries?
Hanila includes electrical, mechanical, process, industrial and civil engineering symbols, plus architectural shapes. Each library has an editable system example, named connection points and specification fields. Software architecture and project management packs are also available. Add the packs you use from Shapes → Add more.
Where are my diagrams saved?
Boards are saved locally in your browser and survive reloads. Export a native JSON board for a portable backup. Clearing browser storage or changing browsers will not carry those local boards over automatically.
Can I export a video?
Yes. Add walkthrough steps, or play a scenario and choose a branch, then download an MP4 directly in a compatible browser. Browser export includes progress and cancellation. You can also export PNG, JPG, PDF, Mermaid, and native JSON.
Do I need an account?
No account is needed to use the editor. You can create an account and sign in with email and password. Boards stay in this browser; cloud sync is not available.
Do I have to write Mermaid?
No. Add shapes from the palette, draw connections, and edit directly on the canvas. If you already use Mermaid, paste a supported flowchart and continue visually.
Which Mermaid diagrams can I import?
Hanila currently imports a documented subset of Mermaid flowcharts: rectangles, stadium terminals, diamonds, labeled directed connectors, grouped connections with &, title frontmatter, nested subgraphs, and node fill/stroke styles using hex colors. Custom shapes export using labeled fallbacks, with a preview explaining what Mermaid will omit.