Type arrows like User -> API -> Database and get a laid-out architecture or flow diagram. Fold groups into one box for the big picture, number the steps for a detailed flow.
Drag boxes to move them. Double-click to rename a box or add one. Drag the dot on a box to connect it. Ctrl+Z undoes.
Nothing is uploaded: the diagram lives in your browser and in the links you choose to share.
On a whiteboard tool you draw every box, every arrow and line them up by hand. Here you type what talks to what, one line per arrow, and the layout is done for you. Wrap related services in a group and fold it to one box when you need the big picture; open it again for the detail.
Excalidraw is a free-form whiteboard: you place every shape and arrow yourself. Here the text is the diagram and the layout is automatic, so adding a service is one line instead of drawing and re-aligning boxes. For a loose sketch, Excalidraw is still the better fit.
Put related boxes in a group with Name { ... }. Overview folds every group into a single box and merges the arrows; Details opens them again. You can also fold one group at a time from its header.
No. It is drawn in your browser and kept in your browser storage. A share link carries the diagram inside the link itself, after the # sign, which browsers never send to the server.
Not directly; there is no Mermaid import. Plain lines such as A -> B carry over, but three things differ. Delete the graph TD header, or it becomes a box, and write direction: down instead. Remove Mermaid labels in square brackets, because text in [ ] here is read as shape and colour tags. And --> here draws a dashed arrow for an async call, where in Mermaid it is an ordinary arrow; use -> for a solid one.
A -> B: label puts a label on the arrow, A --> B draws a dashed arrow, A <-> B a two-way one and A <- B points backwards. Name [db, blue] sets a shape and a colour; the shapes are service, db, cache, queue, actor, client, storage, external, decision, terminal and note. title: names the diagram, direction: down lays it out top to bottom, and a line starting with # or // is a comment. One diagram holds up to 300 boxes, 600 arrows and 20,000 characters of text.