Canvas
Diagrams
Create flowcharts, sequences, and visual diagrams
1 min read
Documentation
Create visual diagrams directly from text descriptions. Billix uses Mermaid syntax to generate flowcharts, sequence diagrams, and more.
Diagram Types
Flowcharts
Show processes, decision trees, and workflows:
"Create a flowchart showing the user registration process:
1. User enters email
2. Check if email exists
3. If yes, show error
4. If no, send verification email
5. User clicks verification link
6. Account created"Sequence Diagrams
Illustrate interactions between systems or people:
"Create a sequence diagram showing how a user logs in:
- User sends credentials to frontend
- Frontend sends to API
- API verifies with database
- Database returns result
- API sends token to frontend
- Frontend stores token and redirects"Entity Relationship Diagrams
Show database structures:
"Create an ER diagram for an e-commerce database with:
- Users (id, name, email)
- Products (id, name, price, category_id)
- Categories (id, name)
- Orders (id, user_id, total, status)
- Order_Items (id, order_id, product_id, quantity)"Class Diagrams
Document object-oriented designs:
"Create a class diagram for a vehicle hierarchy:
- Vehicle (base class) with make, model, year
- Car extends Vehicle with numDoors
- Truck extends Vehicle with bedLength
- Motorcycle extends Vehicle with hasSidecar"State Diagrams
Show states and transitions:
"Create a state diagram for an order:
States: Pending, Processing, Shipped, Delivered, Cancelled
Transitions: place order, start processing, ship, deliver, cancel"Gantt Charts
Visualize project timelines:
"Create a Gantt chart for a website project:
- Planning: Jan 1-15
- Design: Jan 10-31
- Development: Feb 1-28
- Testing: Feb 20-Mar 10
- Launch: Mar 15"Creating Diagrams
Describe What You Need
Tell the AI what you want to visualize:
"Create a flowchart showing how we handle customer support tickets"Diagram Appears in Canvas
The diagram renders in the Canvas panel with full visual display.
Iterate and Refine
Ask for changes:
- "Add a step for escalation to manager"
- "Change the colors to use our brand palette"
- "Make it flow left to right instead of top to bottom"
Mermaid Syntax
Billix uses Mermaid to render diagrams. Here are the basics:
Flowchart
flowchart TD
A[Start] --> B{Decision}
B -->|Yes| C[Action 1]
B -->|No| D[Action 2]
C --> E[End]
D --> ESequence Diagram
sequenceDiagram
User->>Frontend: Enter credentials
Frontend->>API: POST /login
API->>Database: Query user
Database-->>API: User data
API-->>Frontend: JWT token
Frontend-->>User: Redirect to dashboardEntity Relationship
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
PRODUCT ||--o{ LINE-ITEM : "appears in"Customizing Diagrams
Colors and Styles
"Use a color scheme with:
- Blue for user actions
- Green for success states
- Red for error states
- Gray for system processes"Layout Direction
- Top to Bottom (TD) - default
- Left to Right (LR)
- Bottom to Top (BT)
- Right to Left (RL)
"Make the flowchart go left to right"Shapes
- Rectangles for processes
- Diamonds for decisions
- Circles for start/end
- Parallelograms for input/output
Best Practices
Keep It Simple
Complex diagrams become hard to read. Tips:
- Limit to 10-15 nodes
- Break complex processes into multiple diagrams
- Use sub-processes for detail
Use Clear Labels
Good: "Validate user input"
Bad: "Step 3"
Good: "API Gateway"
Bad: "Box 2"Show the Right Level of Detail
- High-level: Major steps only
- Detailed: Include all decision points
- Technical: Show systems and data flow
Request Specific Types
"Create a swimlane diagram showing responsibilities:
- Customer lane
- Sales lane
- Support lane
- Engineering lane"Exporting Diagrams
Copy as Code
Click copy to get the Mermaid code. Use in:
- GitHub Markdown (supports Mermaid)
- Notion (supports Mermaid)
- Documentation sites
- Any Mermaid-compatible tool
Export as Image
- Right-click the diagram
- Select "Save image as..."
- Choose PNG or SVG format
Common Diagram Requests
Process Flow
"Create a flowchart for our release process:
code review → testing → staging → production"Architecture Diagram
"Create a diagram showing our microservices:
- API Gateway connects to User Service, Order Service, Payment Service
- All services connect to their own databases
- API Gateway also connects to Redis cache"User Journey
"Map the user journey for purchasing a product:
from landing page to checkout completion"Decision Tree
"Create a decision tree for customer support:
first ask about issue type, then branch based on response"Common Questions
Next Steps
- Create Slides for presentations
- Make Charts for data
- Explore Code Canvas
Was this page helpful? Let us know!
Report an issue