Beauty Diagram
Use case

Product flow diagrams

Turn user journeys, onboarding flows, and product decisions into diagrams that PM, design, and engineering can read together.

The goal is not to rewrite the diagram from scratch, but to make the source easier to present and reuse.

At a glance

A scenario page for product teams aligning on user journeys, states, handoffs, and edge cases.

Who this is forBest diagram typesWorkflow
Rendered proof
Product onboarding path with an activation branch.
Theme · Obsidian
Open this diagram in editor
Yes No User signs up Create workspace DECISION Invitesteammate? Send invite Show firstdiagram template Collaborativesetup First diagramexported
View Mermaid sourcePlain-text diagram syntax — copy or edit directly.
diagram.mmd
1flowchart TD
2  A[User signs up] --> B[Create workspace]
3  B --> C{Invites teammate?}
4  C -- Yes --> D[Send invite]
5  C -- No --> E[Show first diagram template]
6  D --> F[Collaborative setup]
7  E --> G[First diagram exported]
8  F --> G

Who this is for

Product managers, designers, and engineers who need a shared map of user decisions, screens, product states, and edge cases.

  • Onboarding and activation flows
  • Checkout or upgrade paths
  • State transitions and exception paths

Best diagram types

Flowcharts explain user decisions, state diagrams explain lifecycle transitions, and mindmaps help organize early product discovery.

Workflow

Map the happy path first, add alternate branches and edge cases, then beautify the diagram before sharing it in a spec or review deck.