Export & Sharing

Transform your flowcharts into professional deliverables. Export to multiple formats, share with stakeholders, embed in documentation, and maintain control over your content with flexible sharing options.

Overview

DiagramKit.AI provides comprehensive export and sharing capabilities designed for professional use. Whether you need a high-resolution PNG for presentations, a scalable SVG for web use, a PDF for documentation, or a JSON file for programmatic access, we've got you covered.

Our export system ensures pixel-perfect rendering, proper zoom levels, and clean outputs without unnecessary whitespace. Every export maintains ISO 5807 compliance and professional appearance.

Export Formats

PNG Export

Best for: Presentations, documentation, quick sharing

Features:

• High-resolution output (up to 4K)
• Transparent or white background
• Automatic zoom and centering
• Crisp text rendering
• Proper anti-aliasing

Quality Settings:

• Standard (1920x1080): Good for emails, web
• High (2560x1440): Presentations, print
• Ultra (3840x2160): Professional print, large displays
• Custom: Specify exact dimensions

Keyboard Shortcut: Cmd/Ctrl + P

SVG Export

Best for: Web use, infinite scaling, editing in design tools

Features:

• Vector-based (scales infinitely)
• Small file size
• Editable in Illustrator, Figma
• Perfect for responsive web design
• Maintains all shape properties

Use Cases:

• Embedding in websites
• Importing into design tools
• Creating animated flowcharts
• High-quality print with no pixelation

Options:

• Embedded fonts vs. system fonts
• Include/exclude grid
• Optimize for file size vs. editability

PDF Export

Best for: Documentation, archival, printing

Features:

• Multi-page support (coming soon)
• Vector-based rendering
• Embedded fonts
• Print-ready output
• Searchable text

Settings:

• Page size (A4, Letter, Legal, Custom)
• Orientation (Portrait, Landscape)
• Margins
• Scale to fit

Quality:

• 300 DPI for print
• Embedded color profiles
• PDF/A compliance option (Enterprise)

JSON Export

Best for: Data backup, version control, programmatic access

Features:

• Complete flowchart data
• Nodes, edges, positions, labels
• Metadata and settings
• Human-readable format
• Git-friendly

Structure:

{
  "id": "flow-123",
  "name": "User Login Flow",
  "workspaceId": "ws-456",
  "nodes": [...],
  "edges": [...],
  "metadata": {...}
}

Use Cases:

• Backup and restore
• Version control with Git
• Automated processing
• Data migration
• API integrations

Export Quality Settings

Resolution Options

Standard (1x):

• 1920x1080 pixels
• ~500 KB file size
• Fast export (1-2 seconds)
• Good for quick sharing

High (2x):

• 3840x2160 pixels
• ~1.5 MB file size
• Medium export (3-5 seconds)
• Recommended for presentations

Ultra (4x):

• 7680x4320 pixels
• ~3 MB file size
• Slower export (5-10 seconds)
• Professional print quality

Custom:

• Specify exact width and height
• Maintains aspect ratio option
• Maximum 16384x16384 (browser limit)

Background Options

Transparent:

• PNG only
• No background
• Perfect for overlays
• Layer in presentations

White:

• Clean, professional
• Good for documents
• Print-friendly
• Default option

Grid (coming soon):

• Show alignment grid
• Helpful for technical docs
• Customizable grid size

Watermark Settings

Free Plan:

• ⚠️ "Made with DiagramKit.AI" watermark
• Bottom-right corner
• Subtle but visible
• Cannot be removed

Pro Plan:

• ✅ No watermark on exports
• Clean, professional output
• Your brand, your way

Enterprise Plan:

• ✅ No watermark
• ✅ Custom branding option (planned)
• ✅ Add your company logo

Export Process

Quick Export (PNG)

1. Open flowchart in editor
2. Press Cmd/Ctrl + P or click Export button
3. Select PNG format (default)
4. Choose quality (Standard, High, Ultra)
5. Click "Export"
6. File downloads automatically

Advanced Export

1. Click Export button in toolbar
2. Open Advanced Settings panel
3. Configure options:
   • Format (PNG, SVG, PDF, JSON)
   • Quality/resolution
   • Background color
   • Include/exclude grid
   • Margins and padding
4. Preview export (shows final output)
5. Adjust settings if needed
6. Click "Export"

Batch Export (Enterprise)

Export multiple flowcharts at once:

1. Select flowcharts in library view
2. Click "Batch Export" button
3. Choose format (all same format)
4. Set quality (applies to all)
5. Downloads ZIP file with all exports

Limits:

• Pro: Up to 10 flowcharts per batch
• Enterprise: Unlimited batch size

Sharing Options

Direct Link Sharing

Generate shareable link:

1. Click "Share" button in editor
2. Toggle "Enable sharing"
3. Copy link
4. Share via email, Slack, etc.

Link Settings:

• View-only: Recipients can view, not edit
• Expiration: 24h, 7d, 30d, never
• Password protection: Optional (Pro+)
• Require login: Optional (Pro+)

Example link:

https://diagramkit.ai/share/abc123xyz

Workspace Sharing

Share entire workspace with team:

1. Invite team members (Owner/Editor only)
2. Assign roles (Viewer, Editor, Owner)
3. Members access all flows in workspace
4. Manage permissions in Team Settings

See Team Collaboration for details.

Public Sharing (Free Plan)

Free plan workspaces are public:

• Anyone with link can view
• Read-only by default
• Good for portfolios, education
• Cannot make private without upgrade

Pro/Enterprise workspaces:

• Private by default
• Control who sees what
• Selective sharing

Embed (Coming Soon)

Embed flowcharts in websites:

<iframe src="https://diagramkit.ai/embed/abc123"
        width="800" height="600">
</iframe>

Features (planned):

• Responsive embedding
• Interactive or static mode
• Custom styling
• No watermark (Pro+)

Download vs. Share

Download (Export)

Use when:

• Need offline access
• Including in documents
• Archiving/backup
• Editing in other tools
• Printing

Formats available:

• PNG, SVG, PDF, JSON

Output:

• Static file
• No updates when source changes
• Full quality control

Share (Link)

Use when:

• Collaborating with team
• Getting feedback
• Client reviews
• Always want latest version
• Don't need offline access

Benefits:

• Always up-to-date
• Revoke access anytime
• Track views (Enterprise)
• No file management

Limitations:

• Requires internet
• Recipients need browser
• Cannot edit shared version (view-only)

Export Best Practices

For Presentations

Do:

• ✅ Export as PNG (High quality)
• ✅ White background for consistency
• ✅ Check text is readable at distance
• ✅ Export each flowchart separately
• ✅ Name files descriptively

Settings:

• Resolution: High (2x)
• Format: PNG
• Background: White
• Quality: Maximum

For Documentation

Do:

• ✅ Export as PDF for archival
• ✅ SVG for web documentation
• ✅ Include in version control
• ✅ Add metadata (title, version)

Settings:

• Format: PDF for print, SVG for web
• Page size: A4 or Letter
• Margins: 0.5 inch minimum
• Embed fonts: Yes

For Web Use

Do:

• ✅ Export as SVG for scaling
• ✅ Optimize file size
• ✅ Transparent background if needed
• ✅ Test on different screen sizes

Settings:

• Format: SVG
• Optimize: Yes
• Fonts: Embedded
• Background: Transparent or white

For Print

Do:

• ✅ Use Ultra quality (4x)
• ✅ PDF format with 300 DPI
• ✅ CMYK color mode (coming soon)
• ✅ Include bleed if needed

Settings:

• Format: PDF
• Resolution: 300 DPI
• Color: CMYK (Enterprise)
• Bleed: 0.125 inch

Plan Requirements

Free Plan

• ✅ All export formats (PNG, SVG, PDF, JSON)
• ✅ Standard quality
• ✅ Public link sharing
• ⚠️ Watermark on all exports
• ❌ No password protection
• ❌ No custom branding

Pro Plan ($12/mo)

• ✅ All export formats
• ✅ High and Ultra quality
• ✅ No watermark
• ✅ Private sharing
• ✅ Password protection
• ✅ Link expiration control
• ✅ Batch export (up to 10)

Enterprise Plan ($49/mo)

• ✅ All Pro features
• ✅ Unlimited batch export
• ✅ Custom branding (planned)
• ✅ Advanced analytics
• ✅ API access
• ✅ Webhook notifications
• ✅ CMYK color mode
• ✅ PDF/A compliance

Current Limitations

Export Engine

• Maximum resolution: 16384x16384 (browser limit)
• Large flowcharts (100+ nodes) may take longer
• Ultra quality exports: 5-10 seconds
• No batch export on Free plan

File Size

• PNG Ultra quality: ~3 MB average
• SVG: Usually under 500 KB
• PDF: Varies based on complexity
• JSON: Minimal (usually under 100 KB)

Browser Support

• Modern browsers only (Chrome, Firefox, Safari, Edge)
• No IE11 support
• Some older mobile browsers may struggle with Ultra quality

Missing Features

• No CMYK color mode yet (RGB only)
• No custom page sizes beyond presets
• No multi-page PDF (flowchart splits)
• No embed code generation yet

Troubleshooting

"Export is blank/empty"

• Ensure flowchart has nodes
• Try Standard quality first
• Check browser console for errors
• Disable browser extensions
• Try different browser

"Text is blurry in PNG"

• Increase quality to High or Ultra
• Ensure you're not scaling up after export
• Check display scaling in OS
• Use SVG for perfect text rendering

"PDF is huge file size"

• Simplify flowchart if possible
• Use SVG instead for digital use
• Reduce number of nodes
• Disable embedded fonts if system fonts are acceptable

"Cannot share link"

• Verify workspace privacy settings
• Check you have sharing permissions
• Ensure flowchart is saved
• Try regenerating share link
• Upgrade if on Free plan and need private sharing

"Watermark covers content"

• Adjust flowchart to avoid bottom-right corner
• Upgrade to Pro for no watermark
• Cannot remove watermark on Free plan

Keyboard Shortcuts

| Shortcut | Action | |----------|--------| | Cmd/Ctrl + P | Quick PNG export | | Cmd/Ctrl + Shift + E | Open export dialog | | Cmd/Ctrl + Shift + S | Open share dialog | | Cmd/Ctrl + Shift + L | Copy share link |

Related Features

• Team Collaboration - Share with teammates
• Workspace Management - Organize shared content
• AI Quality Analysis - Validate before exporting

Next Steps

• Explore Print Optimization