Team Collaboration

Transform flowchart creation from a solo activity into a collaborative team effort. Work together in real-time, see who's editing what, manage team permissions, and keep everyone on the same page.

Overview

DiagramKit.AI's collaboration features enable teams to work together seamlessly on flowcharts. Whether you're documenting business processes, designing system architectures, or creating educational content, collaboration tools help your team create better diagrams faster.

From real-time presence indicators to role-based access control, every feature is designed to make teamwork effortless while maintaining security and control over your content.

How It Works

Our collaboration system operates at the workspace level:

1. Workspace Hierarchy: User → Workspaces → Flows → Team Members
2. Real-Time Sync: Changes propagate across all connected users
3. Role-Based Access: Owners, Editors, and Viewers with different permissions
4. Presence System: See who's online and where they're working

Current Implementation

The current system:

• ✅ Works across multiple browser tabs
• ✅ Shows user presence with colored cursors
• ✅ Real-time cursor position updates
• ✅ Join/leave notifications
• ❌ Not yet available across different devices
• ❌ Not yet available for different users simultaneously

This provides the full collaboration experience for demo and testing purposes, with production-ready features launching soon.

Real-Time Collaboration

User Presence

See who's working on the same flowchart:

Visual Indicators:

• Colored cursor badges with initials
• User list in top-right corner
• Active status indicators
• Last seen timestamps

Presence Colors: Each team member gets a unique color:

• 🔵 Blue
• 🔴 Red
• 🟢 Green
• 🟡 Yellow
• 🟣 Purple
• 🟠 Orange

Cursor Tracking

Watch collaborators' cursors in real-time:

• See exact mouse position
• Smooth cursor animations
• Appears only when users are active
• Fades when inactive for 30 seconds

Privacy Note: Cursor tracking only works within flowcharts. Your cursor isn't tracked in the dashboard, settings, or other areas.

Live Edits

Changes appear instantly for all collaborators:

• Node additions show immediately
• Label edits sync in real-time
• Edge creation visible to all
• Position updates propagate instantly
• Deletion removes for everyone

Conflict Resolution: If two users edit the same node simultaneously:

• Last write wins (most recent change)
• No data loss on conflicts
• Undo available for both users
• Visual indicator shows recent changes

Role-Based Access Control

Three Permission Levels

Owner:

• Full workspace control
• Manage billing and subscription
• Add/remove team members
• Change workspace settings
• Delete workspace
• All editor and viewer permissions

Editor:

• Create new flows
• Edit all flows in workspace
• Delete flows (own or others')
• Invite new members
• View team member list
• Cannot change workspace settings
• Cannot remove team members
• Cannot access billing

Viewer:

• Read-only access to all flows
• View flowchart library
• Export flows (with watermark on Free plan)
• Cannot create or edit flows
• Cannot invite members
• Cannot delete flows

Permission Checks

Every action checks permissions:

// Creating a flow
if (role === "viewer") {
  // Show "View Only" mode
  // Disable all edit controls
}

// Deleting a member
if (role !== "owner") {
  // Hide "Remove" button
  // API rejects if attempted
}

Users see only the actions they can perform - no confusing disabled buttons or permission error messages.

Changing Roles

As an Owner:

1. Open workspace settings
2. Navigate to Team tab
3. Click role dropdown next to member
4. Select new role
5. Change applies immediately

Role Change Effects:

• Immediate permission update
• User sees notification
• If editing when downgraded to Viewer, changes save but edit mode locks
• No data loss during role transitions

Team Management

Inviting Team Members

Invitation Flow:

1. Create Invitation:

   • Owner or Editor opens Team Settings
   • Clicks "Invite Member"
   • Enters email address
   • Selects role (Editor or Viewer)
   • Optionally adds personal message

2. Share Invite Link:

   • System generates unique token
   • Valid for 7 days
   • Copy link to share via email, Slack, etc.
   • Example: diagramkit.ai/invite/abc123xyz

3. Accept Invitation:

   • Recipient clicks link
   • Creates account or logs in
   • Confirms workspace join
   • Immediately gains access

Invitation Management:

• View all pending invitations
• Resend invitation links
• Revoke invitations before acceptance
• See acceptance status
• Track invitation history

Team Member List

View all workspace members:

Information Displayed:

• Full name
• Email address
• Role
• Join date
• Last active timestamp
• Online status

Actions Available:

• Change role (Owners only)
• Remove member (Owners only)
• View member's flow activity
• Send direct message (coming soon)

Removing Team Members

As an Owner:

1. Open Team Settings
2. Find member to remove
3. Click "Remove" button
4. Confirm removal
5. Member loses access immediately

Effects of Removal:

• Immediate access revocation
• Active editing sessions end
• Member can no longer see workspace
• Flows remain unchanged
• Invitation can be sent again if needed

Cannot Remove:

• Yourself (workspace Owner)
• Must transfer ownership first
• Or delete entire workspace

Workspace Privacy Settings

Public vs. Private Workspaces

Public Workspaces:

• ✅ Available on Free plan
• Anyone with link can view (read-only)
• Team members can edit with proper role
• Appears in public workspace directory (optional)
• Good for open-source projects, educational content

Private Workspaces:

• ⭐ Pro plan or higher required
• Only invited team members have access
• Link sharing disabled by default
• Not listed in public directory
• Full access control
• Perfect for business processes, confidential work

Changing Privacy Settings

Making a Workspace Private:

1. Upgrade to Pro plan
2. Open workspace settings
3. Navigate to Privacy tab
4. Toggle "Private Workspace"
5. All public links become invalid

Making a Workspace Public:

1. Open workspace settings
2. Navigate to Privacy tab
3. Toggle "Public Workspace"
4. Optionally enable directory listing
5. Generate shareable link

Collaboration Features

Comments & Feedback

Coming in Q2 2025:

• Add comments to specific nodes
• Thread discussions
• @mention team members
• Mark comments as resolved
• Comment history and search

Current Workaround: Use node labels to add notes:

"Process: Validate User [Note: Need to add timeout - John]"

Version History

Roadmap Feature:

• See all flowchart versions
• Compare changes between versions
• Restore previous versions
• Track who made changes
• Branch and merge workflows

Current State: Manual versioning via duplicate + rename:

1. Right-click flow
2. Select "Duplicate"
3. Rename: "Login Flow v2"

Activity Feed

Planned:

• Real-time activity stream
• "John edited Login Flow"
• "Sarah created new flowchart"
• Filter by user, action, date
• Export activity logs

Team Collaboration Workflows

Workflow 1: Process Documentation

Scenario: HR team documenting onboarding process

1. Owner creates workspace: "HR Processes"
2. Invites team: HR Manager (Editor), Staff (Viewers)
3. Editor creates flow: "New Hire Onboarding"
4. Team collaborates: Multiple editors add sections
5. Viewers review: Stakeholders view and provide feedback
6. Owner approves: Final review and publication

Workflow 2: System Architecture

Scenario: Dev team designing microservices architecture

1. Tech Lead creates workspace: "System Architecture"
2. Invites developers: All as Editors
3. Parallel work: Different developers design different services
4. Real-time review: Team sees changes as they happen
5. Async feedback: Team members review when available
6. Iteration: Multiple revision cycles

Workflow 3: Educational Content

Scenario: Teacher creating algorithm flowcharts

1. Teacher creates workspace: "CS101 Algorithms"
2. Public workspace: Students can view
3. Selective editing: TAs invited as Editors
4. Student access: View-only for learning
5. TA contributions: TAs add examples
6. Version control: Manual versioning for each semester

Plan Requirements

Free Plan

• ❌ No team collaboration
• ✅ Solo workspace only
• ✅ Public workspace option
• ❌ 1 workspace maximum
• ❌ Cannot invite members

Pro Plan ($12/mo)

• ✅ Up to 5 team members per workspace
• ✅ 5 workspaces
• ✅ Private workspaces
• ✅ Real-time collaboration
• ✅ Role-based access control
• ✅ User presence indicators
• ✅ Team management tools
• ✅ Invitation system

Enterprise Plan ($49/mo)

• ✅ Unlimited team members
• ✅ Unlimited workspaces
• ✅ All Pro features
• ✅ SSO integration (planned)
• ✅ Audit logs (planned)
• ✅ Advanced permissions (planned)
• ✅ Priority support
• ✅ Custom training

Best Practices

Team Organization

✅ Do:

• Create separate workspaces for departments
• Use descriptive workspace names
• Regularly review team member access
• Remove inactive members
• Document workspace purpose

❌ Avoid:

• One massive workspace for everything
• Granting everyone Owner role
• Leaving old invitations active
• Adding external parties to private workspaces without review

Role Assignment

Use Viewer for:

• Stakeholders who need visibility only
• External consultants (temporary access)
• Clients reviewing deliverables
• Team members in training

Use Editor for:

• Active contributors
• Day-to-day team members
• Trusted collaborators
• Content creators

Use Owner for:

• Department heads
• Project leads
• Billing administrators
• 1-2 people maximum per workspace

Communication

While collaboration is real-time, communication is key:

• Use external chat (Slack, Teams) for discussions
• Document decisions in flowchart labels
• Schedule review sessions for complex flows
• Set clear ownership for each flowchart

Current Limitations

Demo Implementation

• ✅ Works across browser tabs on same device
• ❌ Not yet cross-device or cross-user
• ❌ No WebSocket connection yet
• ❌ localStorage-based synchronization
• ⏳ Full production version: Q2 2025

Missing Features

• No commenting system (roadmap)
• No version history (planned)
• No activity feed (planned)
• No conflict resolution UI (coming)
• No offline mode (future)

Performance

• Optimal for 2-5 simultaneous users
• May slow with 10+ concurrent editors
• Large flowcharts (100+ nodes) may lag
• Cursor updates throttled to 60fps

Troubleshooting

"Can't see other users' cursors"

• Ensure you're on Pro plan or higher
• Check that other users are online
• Refresh the page
• Verify workspace is shared
• Currently only works across tabs in same browser

"Changes not syncing"

• Check internet connection
• Verify you have Editor role
• Ensure flowchart isn't locked
• Try refreshing the page
• Clear browser cache if persistent

"Can't invite team members"

• Verify you have Pro plan or higher
• Check that you're Owner or Editor
• Ensure workspace isn't at member limit (5 on Pro)
• Verify email address is valid
• Check invitation hasn't been sent already

"Removed member still has access"

• Changes take up to 30 seconds to propagate
• Ask member to refresh page
• Verify removal completed (check team list)
• If persistent, revoke all sessions in settings

Keyboard Shortcuts

| Shortcut | Action | |----------|--------| | Cmd/Ctrl + Shift + T | Open team panel | | Cmd/Ctrl + Shift + I | Invite member | | Cmd/Ctrl + U | Toggle user presence panel | | Escape | Close collaboration panels |

Related Features

• Workspace Management - Organize teams and flows
• Export & Sharing - Share flowcharts externally
• AI Prompt Bar - Collaborate using AI

Next Steps

• Learn Team Best Practices
• Explore Permission Matrix