🚀 Getting Started
Quick Start (3 Steps)
1
Choose Your Mode
Click either "UML" or "UI Design" button in the left palette
Click either "UML" or "UI Design" button in the left palette
2
Drag Elements
Browse categories, click and drag elements onto the canvas
Browse categories, click and drag elements onto the canvas
3
Customize & Export
Edit text, adjust properties, and export as PNG or JSON
Edit text, adjust properties, and export as PNG or JSON
💡 Pro Tip: Start with a mobile frame (iPhone/Android) when designing UI mockups, then add components inside it!
📊 Creating UML Diagrams
Available Diagram Types
Use Case Diagrams
Create actors, use cases, and relationships to model system functionality
Class Diagrams
Design classes, interfaces, attributes, methods, and relationships
Sequence Diagrams
Model interactions between objects with lifelines and messages
Activity Diagrams
Visualize workflows with actions, decisions, and parallel flows
State Diagrams
Show state transitions and behaviors of system objects
Component Diagrams
Illustrate component organization and dependencies
Step-by-Step: Creating a Class Diagram
1
Select UML mode from palette
2
Expand Class category
3
Drag Class element to canvas
4
Double-click to edit class name, attributes, and methods
5
Click Connect button, then click two classes to create relationship
6
Select elements to customize colors and styles in Properties panel
📱 Designing UI Mockups
Step-by-Step: Creating a Mobile App Screen
1
Click UI Design mode in palette
2
Drag iPhone Frame (or Android/Tablet) to canvas
3
Add Navigation Bar at the top
4
Drag UI components (buttons, inputs, cards) into the frame
5
Customize text by double-clicking or using text editor
6
Add Tab Bar or Bottom Navigation at bottom
📸 Adding Images & Media
🎨 New Feature! You can now upload your own images and videos!
- Images: Select an Image element, click the 📁 button, choose your image file
- Videos: Select a Video element, click the 📁 button, upload your video
- Avatars: Select Avatar element, upload profile pictures
- Image Cards: Click 📁 button on card to add custom images
✏️ Customizing Navigation & Lists
Click the ✏️ (edit) button when an element is selected to:
- Navigation Bar: Add/remove menu items
- Tab Bar: Change number of tabs and customize icons
- Bottom Navigation: Adjust number of navigation buttons
- Menu: Add/edit menu items
- List: Customize list items
✨ Key Features
Element Manipulation
- Drag & Drop: Click and drag elements from palette to canvas
- Move: Select and drag elements anywhere on canvas (grid snapping enabled)
- Resize: Select element, drag corner handle to resize
- Rotate: Use rotation handle on arrows for 360° rotation
- Delete: Click ✕ button or press Delete/Backspace key
- Edit Text: Double-click any text area to open editor
Connections
- Click Connect button (or press C)
- Click first element (shows yellow dashed outline)
- Click second element to create arrow connection
- Connections automatically update when elements are moved
Properties Panel
Select any element to customize:
- 🎨 Colors: Background, border, text colors
- 📏 Dimensions: Width and height
- 🖼️ Border: Width and radius
- ✍️ Typography: Font size and weight
Export Options
- Export PNG: High-quality image (2x resolution, all controls hidden)
- Save JSON: Complete diagram with all elements, connections, styles
- Load JSON: Restore previously saved diagrams perfectly
⚠️ Important: JSON exports include embedded images. Large images may create big JSON files!
⌨️ Keyboard Shortcuts
| Shortcut | Action |
|---|---|
| V | Switch to Select mode |
| C | Switch to Connect mode |
| Ctrl + Z | Undo last action |
| Ctrl + Y | Redo action |
| Delete or Backspace | Delete selected element |
| Ctrl + + | Zoom in |
| Ctrl + - | Zoom out |
| Ctrl + 0 | Reset zoom to 100% |
| Ctrl + Enter | Save text in editor |
💡 Tips & Best Practices
Tip 1: Use the search bar in the palette to quickly find elements
Tip 2: Save your work frequently using JSON export
Tip 3: Start with larger elements (frames, containers) then add smaller components
Tip 4: Use the grid snapping (20px) for perfect alignment
Tip 5: Customize colors in Properties panel to match your brand
❓ Common Questions
Can I use this offline?
Yes! Once the page loads, you can work offline. However, Google Fonts require internet for first load.
Are my diagrams saved automatically?
No, you need to manually export as JSON to save your work. Remember to save frequently!
Can I collaborate with others?
Currently, you can share JSON files with team members who can import and edit them.
What image formats are supported?
All common image formats: JPG, PNG, GIF, SVG, WebP. For videos: MP4, WebM, OGG.
Is there a size limit for uploaded media?
Files are embedded as base64, so keep images under 5MB for best performance.