Cloud Diagrams User Manual

🚀 Getting Started

Creating an Account

To get started with Cloud Diagrams, create a free account:

1. Visit the Cloud Diagrams homepage
2. Click "Get Started" or "Sign Up"
3. Enter your email address and create a password
4. Verify your email address
5. You're ready to start creating diagrams!

Your First Diagram

Once logged in, you'll be directed to the editor. Here's how to create your first diagram:

1. Click "New Diagram" in the toolbar or sidebar
2. Choose a diagram type (e.g., Architecture Diagram)
3. Give your diagram a name
4. Drag cloud services from the sidebar onto the canvas
5. Connect services by clicking and dragging between nodes
6. Click "Save" to save your work

🖥 User Interface

The Cloud Diagrams interface consists of four main areas:

📊 Creating Diagrams

Cloud Diagrams supports over 40 diagram types organized into 8 categories:

Creating a New Diagram

1. Click the "New Diagram" button in the toolbar or sidebar
2. Select the diagram type from the modal
3. Enter a name for your diagram
4. Click "Create" to start with a blank canvas

🧩 Components & Services

Cloud Services

Access 100+ cloud services from three major providers:

Service Categories

Services are organized into 9 categories for easy navigation:

• • Compute
• • Storage
• • Database
• • Networking
• • Security
• • Analytics
• • Integration
• • DevOps
• • AI/ML

Adding Services to Canvas

There are two ways to add services:

Node Properties

Each node can have the following properties:

• Label - The display name of the component
• Icon - Visual representation (emoji or provider icon)
• Color - Node border and accent color
• Description - Optional tooltip text
• Stereotype - UML stereotype notation (for class diagrams)
• Attributes - List of properties (for classes/entities)
• Methods - List of methods (for class diagrams)

🔗 Connections & Flows

Creating Connections

To connect two nodes:

1. Hover over a node to see the connection handles
2. Click and drag from a handle on the source node
3. Drag to a handle on the target node
4. Release to create the connection

Connection Properties

Connections (edges) can be customized with:

• Arrow Direction - Forward, Backward, or Bidirectional
• Marker Type - Arrow, Triangle (inheritance), Diamond (aggregation), Filled Diamond (composition), None
• Step Number - Automatic numbering for flow sequences
• Label - Descriptive text for the connection
• Style - Stroke width, color, dash pattern

Flow Steps

Flow steps allow you to create numbered sequences showing how data or requests flow through your architecture. Each connection can have a step number and description that will be displayed during animation playback.

🎬 Animations

Cloud Diagrams supports animated walkthroughs that bring your diagrams to life. Animations follow the numbered flow steps to show how data moves through your system.

Playback Controls

• Play/Pause - Start or stop the animation
• Previous/Next - Step through animations manually
• Speed Control - Adjust playback speed (0.5x, 1x, 1.5x, 2x)
• Progress Bar - Shows current position in the sequence

Creating Animated Flows

1. Create connections between your nodes
2. Assign step numbers to each connection
3. Add descriptions for each step
4. Click Play to preview the animation
5. Adjust timing and order as needed

📤 Export & Share

Export Formats

Export your diagrams in multiple formats:

Sharing Options

• Share Link - Generate a read-only link for anyone to view
• Invite Collaborators - Add team members as editors or viewers
• Team Workspace - Share diagrams with your entire team

📌 Requirements Traceability

Cloud Diagrams includes a full requirements traceability system compliant with ISO/IEC/IEEE 29148 and ReqIF (Requirements Interchange Format). Link requirements to diagram elements, track coverage, and generate traceability matrices.

Creating Requirements

1. Click the Requirements button in the toolbar
2. Click Add Requirement in the Requirements Panel
3. Enter a Requirement ID (e.g., REQ-001, US-123, FR-042)
4. Fill in the title and description
5. Select the requirement type, priority, and status
6. Optionally add rationale, acceptance criteria, source, and owner
7. Click Save to create the requirement

Requirement Properties

Linking Requirements to Diagram Elements

Connect requirements to specific nodes, edges, or entire diagrams to establish traceability:

1. Select a node or edge on the canvas
2. Open the Requirements Panel
3. Find the requirement you want to link
4. Click Link to Selected Element
5. A trace link is created with the default type "satisfies"

Trace Link Types (V-Model Compliant)

Coverage Analysis

Switch to the Coverage tab in the Requirements Panel to see how well your diagram covers the defined requirements:

• Total Requirements - Number of requirements in the diagram
• Covered Requirements - Requirements linked to at least one element
• Verified Requirements - Requirements with verified trace links
• Uncovered Requirements - Requirements with no links (gaps)
• Node Coverage - Percentage of nodes linked to requirements
• Edge Coverage - Percentage of edges linked to requirements
• Coverage Percentage - Overall coverage metric

Traceability Matrix

Open the Matrix tab or the full Traceability Matrix dialog for a comprehensive view:

• View all requirements with their links in a table format
• Filter by type, status, priority, or coverage status
• Sort by any column (ID, title, link count, verification %)
• Export the matrix as CSV for external analysis
• Identify gaps where requirements have no trace links

Hierarchical Requirements

Organize requirements in a hierarchy using parent-child relationships:

1. Create a parent requirement (e.g., REQ-001: User Authentication)
2. Create child requirements and set the Parent ID field
3. Use "Derives" or "Child Of" trace link types
4. View the hierarchy in the Requirements Panel

☁ Cloud Import & Export

Auto-discover your existing cloud infrastructure and generate diagrams automatically. Import resources from AWS, Azure, and GCP, then export changes back to your cloud environment.

Importing Cloud Infrastructure

1. Click Cloud Import in the toolbar
2. Select your cloud provider (AWS, Azure, or GCP)
3. Enter your credentials (never stored, held in browser memory only)
4. Click Validate Credentials to verify access
5. Select the region(s) to scan
6. Optionally filter by resource types
7. Click Import to discover and generate the diagram

Environment-Aware Imports

Automatically split imported resources into separate diagrams by environment:

• Auto-Detection - Environments detected from resource tags, naming patterns, and metadata
• Supported Environments - Development, Test, Staging, Production
• Separate Diagrams - Each environment generates its own diagram
• Environment Filtering - Import only specific environments

Import Features

Exporting Changes to Cloud

Push diagram modifications back to your cloud provider:

1. Make changes to your imported diagram
2. Click Export to Cloud
3. Review the list of pending changes (create, update, delete)
4. Use Dry Run mode to preview changes without applying them
5. Approve or reject individual changes
6. Click Apply to push approved changes to your cloud

Supported Resource Types

🏗 Infrastructure as Code

Convert your architecture diagrams into deployable Infrastructure as Code (IaC). Cloud Diagrams supports 9 IaC platforms and multiple output formats, letting you generate production-ready infrastructure definitions from your visual architecture.

Supported Platforms

Generating IaC

1. Create your architecture diagram with cloud services (AWS, Azure, or GCP nodes)
2. Click the IaC button in the toolbar (purple gradient button)
3. Select your target IaC platform (e.g., Terraform, CloudFormation)
4. Configure options: project name, environment, region, and naming prefix
5. Toggle optional features: networking (VPC), monitoring, and security defaults
6. Click Generate to produce the IaC code

Configuration Options

Output Formats

Generated code is available in the format native to each platform:

Working with Generated Code

After generation, the code panel provides several tools:

• File Selector - Switch between main file and additional files (e.g., variables.tf, outputs.tf)
• Copy - Copy the current file's code to clipboard
• Download - Download the current file
• Download All - Download all generated files at once

Security Validation

Every generated IaC output is automatically validated against 16+ security rules covering industry best practices and compliance frameworks. The Security tab shows:

Cloud Credentials

The Credentials tab allows you to provide cloud provider credentials for deployment. Credentials support all three major providers:

Cross-Provider Support

The IaC generator maps your architecture services to the correct resource types for each platform. For example, an AWS S3 bucket in your diagram will be generated as:

👥 Collaboration

Cloud Diagrams supports real-time collaboration with a comprehensive suite of tools for team communication and diagram management.

Collaboration Roles

Adding Collaborators

1. Click the "Collaboration" button in the toolbar
2. Enter the email address of the person you want to invite
3. Select their role (Editor or Viewer)
4. Click "Invite" to send the invitation

Comments & Discussions

Add comments to discuss diagram elements with your team:

• Threaded Replies - Reply to comments to keep discussions organized
• @Mentions - Tag team members using @name to notify them
• Element Comments - Attach comments to specific nodes or edges
• Resolve Comments - Mark comments as resolved when addressed

Comment Reactions

Quickly respond to comments with emoji reactions:

Click on a comment's reaction picker to add or toggle your reaction. Reactions help acknowledge comments without creating additional reply clutter.

Activity Feed

The Activity Feed provides a real-time timeline of all collaboration events:

Click the clock icon in the toolbar to open the Activity Feed. Use the filter tabs to view specific activity types.

Version History

Save and restore named versions of your diagram:

1. Click the version history icon (clock with badge) in the toolbar
2. Click "Save Current Version" to create a snapshot
3. Enter a descriptive name (e.g., "v1.0 - Initial Architecture")
4. Optionally add a description explaining the changes
5. Click "Save Version" to save the snapshot

Sticky Notes

Add quick annotations to the canvas without creating formal comments:

1. Click the sticky note icon in the bottom-left toolbar
2. Click anywhere on the canvas to place a sticky note
3. Double-click the note to edit its content
4. Click the color dot to change the note color
5. Drag the note to reposition it
6. Drag the corner to resize the note

Sticky notes are perfect for quick feedback, TODO items, or marking areas that need attention. All collaborators can see and edit sticky notes.

Notification Center

Stay informed about important collaboration events with the Notification Center:

• @Mentions - When someone mentions you in a comment
• Comment Replies - Replies to your comments
• Collaborator Invites - When you're invited to a diagram
• Version Updates - When new versions are created
• Diagram Changes - Significant changes to shared diagrams

Click the bell icon in the header to view your notifications. Unread notifications are shown with a badge count. Click "Mark all as read" to clear the unread count.

Real-Time Presence

See who's currently viewing the diagram:

• Active collaborators appear as colored avatars in the toolbar
• Each user has a unique cursor color
• See what element each user has selected
• Presence updates automatically every few seconds

Element Locking

Lock specific nodes or edges to prevent other collaborators from editing them:

• Lock an Element - Right-click on a node or edge and select "Lock"
• Add a Reason - Optionally explain why the element is locked
• Auto-Unlock - Set an automatic unlock time (15 min to 8 hours)
• Manual Unlock - Click "Unlock" on the lock badge to release

Suggested Changes Mode

For controlled collaboration, enable Suggested Changes mode to require approval for modifications:

1. Click the "Suggestions" button in the toolbar
2. When enabled, your changes become suggestions instead of direct edits
3. Diagram owners and editors can review pending suggestions
4. Approved changes are automatically applied to the diagram
5. Rejected changes include feedback from the reviewer

Webhook Integrations

Connect your diagrams to external services like Slack, Discord, or custom systems:

• Add Webhooks - Click Settings → Webhooks to configure
• Choose Events - Select which events trigger the webhook
• Signing Secret - Optionally generate a secret for payload verification
• Monitor Status - View delivery status and failure counts

Comment Attachments

Attach files to your comments to provide additional context:

• Supported Types - Images (PNG, JPG, GIF, SVG), PDFs, and documents
• Attach Files - Click the paperclip icon when writing a comment
• Image Previews - Attached images show inline thumbnails
• File Size Limit - Maximum 5MB per attachment
• Download - Click any attachment to download the original file

Session Recording

Record your editing sessions to create walkthroughs and tutorials:

1. Click the record icon in the toolbar to start a new recording
2. Give your recording a title and optional description
3. Click "Start Recording" to begin capturing events
4. Make your changes - all actions are recorded with timestamps
5. Click "Stop Recording" when finished
6. Browse and replay recordings from the Recordings panel

Approval Workflows

Create formal approval processes for important diagram changes:

1. Click "Request Approval" in the collaboration toolbar
2. Enter a title and description for the approval request
3. Set the number of required approvals (1-5)
4. A snapshot of the current diagram state is automatically captured
5. Reviewers can approve, reject, or request changes with comments
6. The workflow completes when the required number of approvals is met

Conflict Resolution

When two collaborators edit the same element simultaneously, the conflict resolution dialog helps you choose the correct version:

• Side-by-Side Comparison - View both your version and theirs
• Keep Mine - Preserve your local changes
• Keep Theirs - Accept the remote collaborator's changes
• Visual Selection - Click on either version to highlight your choice

Template Sharing

Save your diagrams as reusable templates and share them with your team or the community:

1. Open the Template Gallery from the toolbar
2. Click "Save as Template" to create a template from your current diagram
3. Enter a name, description, category, and tags
4. Choose visibility: private, team-only, or public
5. Browse templates by scope (Mine, Team, Public, All)
6. Click a template to preview, then "Use Template" to apply it

Team Workspaces

With a Team plan, you get access to shared team workspaces where all team members can access and collaborate on diagrams. Team admins can manage members and control access.

📝 ADR System

Architecture Decision Records (ADRs) help you document important architectural decisions and the context behind them. Each ADR captures the reasoning, implications, and status of a decision.

ADR Components

• Title - Short description of the decision
• Context - The situation and forces at play
• Decision - What was decided and why
• Status - Proposed, Accepted, Deprecated, or Superseded
• Consequences - Resulting implications
• Related ADRs - Links to other relevant decisions
• Diagram Snapshot - Automatic capture of diagram state

Creating an ADR

1. Click the "ADR" button in the toolbar
2. Click "New ADR" to create a new record
3. Fill in the title, context, and decision details
4. Set the appropriate status
5. Link to related ADRs if applicable
6. Save the ADR

📋 Templates

Start quickly with pre-built architecture templates. Each template provides a starting point that you can customize for your needs.

Available Templates

Using Templates

1. Click the "Templates" tab in the sidebar
2. Browse available templates by category
3. Click on a template to preview it
4. Customize options (cloud provider, services, scaling)
5. Click "Generate" to create the architecture
6. Modify as needed for your specific use case

🔀 Diagram Connections

Link multiple diagrams together to show how different parts of your architecture relate to each other. Diagram connections let you create a network of related diagrams with specific connection points.

Creating Diagram Connections

1. Open the diagram you want to connect from
2. Click Diagram Connections in the toolbar
3. Click New Connection
4. Select the target diagram from the dropdown
5. Optionally specify source and target connection points (specific nodes)
6. Add a description explaining the relationship
7. Choose the direction: bidirectional or unidirectional
8. Click Create to establish the connection

Connection Properties

• Source Diagram - The diagram the connection originates from
• Target Diagram - The diagram the connection points to
• Source Node - Optional specific node as the connection point
• Target Node - Optional specific node on the target diagram
• Description - Text explaining the connection
• Bidirectional - Whether the link works both ways

Navigating Connected Diagrams

Click any diagram connection to navigate directly to the linked diagram. Connected diagrams display a badge indicating the number of connections. You can view all connections for a diagram in the Diagram Connections panel.

🏢 Team Management

Create and manage teams for shared collaboration on diagrams. Teams provide a centralized workspace with role-based access control and shared billing.

Creating a Team

1. Go to Settings and click Teams
2. Click Create Team
3. Enter a team name, slug (URL identifier), and description
4. Optionally add a team image
5. Click Create to set up the team

Team Roles

Managing Members

• Add Members - Invite users by email from the Team Members page
• Change Roles - Promote or demote members between Admin and Member
• Remove Members - Remove users from the team
• Seat Limits - Teams support 2-50 members depending on your plan

Team Diagrams

Diagrams owned by a team are accessible to all team members. Team diagrams appear in a dedicated Team section on the dashboard and can be managed collectively.

Team Billing

Teams use centralized billing through Stripe. The team owner manages the subscription, which covers all team seats. Per-seat pricing ensures you only pay for active members.

💡 Feature Requests

Help shape the future of Cloud Diagrams by submitting and voting on feature requests. Your feedback directly influences the product roadmap.

Submitting a Feature Request

1. Click the Feature Requests option in the help menu
2. Click New Request
3. Enter a descriptive title
4. Provide a detailed description of the feature you'd like
5. Select a category: UI, Functionality, Integration, or Other
6. Click Submit

Voting on Requests

Browse existing feature requests and upvote the ones you want to see implemented. Click the vote button on any request to add your support. Higher-voted features are prioritized on the roadmap.

Request Status

Submitted requests start as Pending. The team reviews and updates the status as features move through the planning and implementation process.

⌨ Keyboard Shortcuts

💰 Plans & Pricing

❓ Frequently Asked Questions