utilitech

UML Diagram

Draw class, sequence, use case, activity, state and ER diagrams from text with a live preview — export PNG or SVG, or share a link.

Diagram code

Insert
44 lines · autosaves as you type

Diagram

Loading the diagram engine…

How to use
  • Pick a diagram type — Class, Sequence, Use case, Activity, State or ER — to start from an example, then edit the text. The diagram redraws as you type.
  • Use the + Insert buttons to add a class, a message, an alt block, a relationship and so on below the line your cursor is on. If the code has a mistake, the last good diagram stays on screen and Go to line takes you to the problem.
  • Download a PNG (2× for sharp slides and docs) or an SVG, Copy image to paste straight into a chat or document, or choose a transparent background. Try the Hand-drawn style for whiteboard-like sketches.
  • Share link copies a link with the whole diagram inside it, so anyone can open and edit a copy. Copy for Markdown gives a ```mermaid block that GitHub, GitLab, Notion and Obsidian draw for you.
Syntax cheat sheet
  • Class: Parent <|-- Child inheritance, A *-- B composition, A o-- B aggregation, A --> B association, A ..> B dependency, + public, - private, # protected.
  • Sequence: A->>B: call, B-->>A: reply, and blocks alt / else, opt, loop, par closed with end.
  • Use case: actor id(Name), use cases id(Name) inside systemBoundary … end, and a ..>:include b or a ..>:extend b.
  • Thai labels: write Thai inside quotes or brackets, for example class Customer["ลูกค้า"], order(สั่งซื้อสินค้า) or A->>B: ส่งคำสั่งซื้อ.
  • The text is Mermaid syntax, so other Mermaid diagrams (Gantt, mind map, timeline, pie…) work too. Tip: you can ask an AI assistant to “write a Mermaid class diagram for…” and paste the result here.
Privacy
  • Diagrams are drawn in your browser and never uploaded. Your latest diagram is saved only in this browser (local storage). A share link keeps the diagram after the #, which browsers don't send to our server.