Diagram editor

An editor for flowcharts, software architecture and network diagrams. Drag shapes onto the canvas, connect them with arrows that find their own way, then export the result as an image or share it as a link.

Shapes and technology logos

Basic shapes such as rectangle, decision, database, document, cloud and actor; around 35 architecture icons such as API, load balancer, cache, queue and firewall; and microservice shapes with logos: Go, Java, Node.js, Python, PostgreSQL, MySQL, MongoDB, Redis, Kafka, RabbitMQ, Kubernetes, NGINX and many more.

Change a shape's technology later and its logo and label follow, while its position and connections stay.

Connectors that route themselves

Hover a shape and drag one of its arrows to connect it. Elbow connectors route around the shapes they join; straight and curved lines are there too. Ends attach to points along every side and keep their place when a shape is resized.

Mark a connector as a call (solid line) or as an asynchronous message or event (dashed line).

Editing

  • Alignment guides and grid snapping
  • Groups, align and distribute, bring forward and send backward
  • Copy and paste between diagrams, and paste images or SVG from other apps
  • Full undo and redo, and a toolbar you can rearrange, with single-key shortcuts
  • Several diagrams open at once, in tabs

Export and share

Copy the diagram or a selection as an image, download it as PNG or SVG, save a .diag file to open again later, or create a share link. The link itself carries the diagram, so nothing is uploaded.

Questions

Do I need an account?

No. Diagrams are saved in your browser as you work.

How do I share a diagram?

Use Share to create a link. The diagram is stored inside the link, so whoever opens it gets their own copy, and nothing goes through a server.

Can I export to PNG or SVG?

Yes: PNG (sharp on high-resolution screens), SVG, or a .diag file you can open again later.

More tools