Exporting Diagrams

Overview

Plant Together provides a comprehensive export system that allows you to download your diagrams in multiple formats. You can export individual documents or create a complete package containing all diagrams in a room.

Export Formats

PlantUML Code

Export the raw .puml source code for use in other PlantUML tools or documentation.

SVG

Vector graphics format that scales perfectly at any resolution. Ideal for web and print.

PNG

Raster image format for easy sharing and embedding in presentations or documents.

How to Export

Open the Download Modal

Click the Download or Export button in the navigation bar. This opens the download package interface.

Select Documents

Choose which documents you want to export:

Check the document to include it in the export
Uncheck the document to exclude it
Click the dropdown arrow to see format options for each document

All documents are selected by default with all formats enabled.

Choose Export Formats

For each document, select which formats you want:

Quick Filters
Per-Document Selection

Use the quick filter buttons at the top to apply bulk selections:

All

Export everything: code, SVG, and PNG for all documents

Code Only

Export only .puml source files

SVG Only

Export only vector graphics

PNG Only

Export only raster images

Expand each document’s dropdown to customize individual formats:

Document1 ▼
  ☑ Code
  ☑ SVG
  ☐ PNG

Document2 ▼
  ☐ Code
  ☑ SVG
  ☑ PNG

Mix and match formats per document for maximum flexibility.

Download the Package

Click the Download button to generate and download a ZIP file containing all selected documents and formats.

The download process may take a few seconds for rooms with many documents or when generating PNG images.

Export Package Structure

The exported ZIP file is organized by document:

plant-uml-diagrams.zip
├── Document1/
│   ├── diagram.puml    # PlantUML source code
│   ├── diagram.svg     # Vector graphic
│   └── diagram.png     # Raster image
├── Document2/
│   ├── diagram.puml
│   └── diagram.svg
└── architecture-overview/
    ├── diagram.puml
    ├── diagram.svg
    └── diagram.png

The ZIP filename is always plant-uml-diagrams.zip. Rename it after download if you need to keep multiple exports.

Format Details

PlantUML Code (.puml)

Use cases:

Version control (Git)
Import into other PlantUML tools
Documentation repositories
CI/CD pipeline diagram generation

Example output:

@startuml
class User {
  +id: string
  +email: string
  +authenticate()
}

class Order {
  +id: string
  +userId: string
  +total: number
}

User "1" -- "many" Order
@enduml

SVG (Scalable Vector Graphics)

Use cases:

Web documentation
High-quality printing
Responsive designs
Further editing in vector tools (Figma, Illustrator)

Advantages:

✅ Infinite scaling without quality loss
✅ Small file size
✅ Searchable text
✅ CSS-styleable

Technical details:

// Source: downloadModal.component.tsx:48-57
const convertToSVG = async (umlText: string): Promise<string> => {
  const svgResult = await plantuml.renderSvg(umlText)

  // Check if the result is an error
  if (svgResult[0] !== '<') {
    throw new Error('Failed to convert UML to SVG')
  }

  return svgResult
}

PNG (Portable Network Graphics)

Use cases:

PowerPoint/Keynote presentations
Slack/Teams messages
Email attachments
Quick previews

Advantages:

✅ Universal compatibility
✅ Easy to share
✅ Embedded metadata

Technical details:

// Source: downloadModal.component.tsx:59-69
const convertToPNG = async (umlText: string): Promise<Blob> => {
  const pngResult = await plantuml.renderPng(umlText)

  if (!pngResult.blob || pngResult.error) {
    throw new Error(
      pngResult.error?.message || 'Failed to convert UML to PNG',
    )
  }

  return pngResult.blob
}

Export Process Details

Step-by-Step Workflow

1. Fetch UML Content
2. Create ZIP Archive
3. Process Each Document
4. Download ZIP

The export process starts by fetching all document content from the server:

// Source: downloadModal.component.tsx:178
const umlContents = await getRoomUML(roomId)
// Returns: [{ docName: "Document1", uml: "@startuml..." }, ...]

// API Call - Source: plant.service.tsx:194-205
export async function getRoomUML(
  roomId: string,
): Promise<{ docName: string; uml: string }[]> {
  const response = await fetch(`${serverHttpUrl}/room/${roomId}/uml`, {
    method: 'GET',
    headers: {
      Authorization: `Bearer ${await retrieveToken()}`,
    },
  })
  if (!response.ok) throw new Error('Failed to fetch UML content')
  return response.json()
}

A ZIP file structure is created using JSZip:

// Source: downloadModal.component.tsx:179
const zip = new JSZip()

Each document gets its own folder:

// Source: downloadModal.component.tsx:191
const docFolder = zip.folder(state.document.name)

For each selected document, the system:

// Source: downloadModal.component.tsx:182-220
for (const state of downloadStates) {
  if (!state.isSelected) continue

  const umlContent = umlContents.find(
    content => content.docName === state.document.name,
  )
  if (!umlContent) continue

  const docFolder = zip.folder(state.document.name)
  if (!docFolder) continue

  // Add code file
  if (state.code) {
    docFolder.file('diagram.puml', umlContent.uml)
  }
  
  // Convert and add SVG
  if (state.svg) {
    try {
      const svgContent = await convertToSVG(umlContent.uml)
      docFolder.file('diagram.svg', svgContent)
    } catch (error) {
      console.error(`Failed to convert ${state.document.name} to SVG`)
    }
  }
  
  // Convert and add PNG
  if (state.png) {
    try {
      const pngBlob = await convertToPNG(umlContent.uml)
      docFolder.file('diagram.png', pngBlob)
    } catch (error) {
      console.error(`Failed to convert ${state.document.name} to PNG`)
    }
  }
}

If conversion fails for SVG or PNG, the error is logged but the export continues with other formats.

Finally, the ZIP is generated and downloaded:

// Source: downloadModal.component.tsx:223-233
const blob = await zip.generateAsync({ type: 'blob' })
const url = window.URL.createObjectURL(blob)

const a = document.createElement('a')
a.href = url
a.download = 'plant-uml-diagrams.zip'
document.body.appendChild(a)
a.click()

window.URL.revokeObjectURL(url)
document.body.removeChild(a)

Quick Filter Buttons

The modal provides four quick filter buttons for common export scenarios:

// Source: downloadModal.component.tsx:71-80
const filterAll = () => {
  setDownloadStates(prev =>
    prev.map(state => ({
      ...state,
      isSelected: true,
      code: true,
      svg: true,
      png: true,
    })),
  )
}

Selection Logic

The export modal implements intelligent selection logic:

Document-Level Selection

// Source: downloadModal.component.tsx:119-133
const handleDocumentCheck = (docId: number, checked: boolean) => {
  setDownloadStates((prev) =>
    prev.map((state) =>
      state.document.id === docId
        ? {
            ...state,
            isSelected: checked,
            code: checked,    // When doc is checked, enable all formats
            svg: checked,
            png: checked,
          }
        : state,
    ),
  )
}

Format-Level Selection

// Source: downloadModal.component.tsx:135-160
const handleTypeCheck = (
  docId: number,
  type: 'code' | 'svg' | 'png',
  checked: boolean,
) => {
  setDownloadStates((prev) =>
    prev.map((state) => {
      if (state.document.id === docId) {
        const newState = { ...state, [type]: checked }
        
        // If all formats unchecked, uncheck parent document
        if (!newState.code && !newState.svg && !newState.png) {
          newState.isSelected = false
        }
        
        // If any format checked, check parent document
        if (newState.code || newState.svg || newState.png) {
          newState.isSelected = true
        }
        
        return newState
      }
      return state
    }),
  )
}

This logic ensures consistency: you can’t have a document selected with no formats, and you can’t have formats selected without the document being checked.

Best Practices

Choose the Right Format

For documentation:

Use SVG for web docs (Markdown, MDX, HTML)
Use PNG for static site generators
Keep code in version control

For presentations:

Use PNG for PowerPoint/Keynote
Use SVG for web-based presentations (reveal.js)

For sharing:

Use PNG for chat/email
Use code for developer collaboration

Export Regularly

Create backups of important diagrams:

Export after major milestone completions
Keep versioned exports in your project repository
Export before making significant changes
Consider automating exports via the API

Optimize File Sizes

SVG files:

Already optimized by PlantUML
Can be further compressed with SVGO if needed

PNG files:

Use PNG for photographs/complex gradients
Prefer SVG for simple diagrams (smaller file size)
Consider PNG compression tools for large batches

Organize Your Exports

Maintain a clear export structure:

project/
├── docs/
│   └── diagrams/
│       ├── 2024-03-01-architecture.zip
│       └── 2024-03-15-api-design.zip
└── source/
    └── plantuml/
        ├── architecture.puml
        └── api-design.puml

Troubleshooting

Download Button Disabled

Causes:

No documents selected
Export is currently processing

Solution:

Ensure at least one document is checked
Wait for the current export to complete

SVG Conversion Failed

Possible causes:

Syntax errors in PlantUML code
Unsupported PlantUML features
Server rendering timeout

Solutions:

Check the diagram renders correctly in the preview
Fix any PlantUML syntax errors
Try exporting individual documents instead of bulk
Contact support if the issue persists

PNG Conversion Failed

Possible causes:

Very large/complex diagram
Browser memory limitations
CheerpJ rendering issues

Solutions:

Try SVG export instead (usually more reliable)
Simplify the diagram if possible
Close other browser tabs to free memory
Refresh the page and try again

ZIP File Is Empty or Corrupt

Possible causes:

Browser interrupted the download
Insufficient storage space
Popup blocker preventing download

Solutions:

Check browser download settings
Ensure sufficient disk space
Disable popup blockers for Plant Together
Try a different browser

Export Takes Too Long

Causes:

Large number of documents
Multiple PNG conversions (slow)
Server under heavy load

Solutions:

Export fewer documents at once
Use SVG instead of PNG when possible
Try during off-peak hours
Use format filters to reduce processing

Programmatic Export

You can automate exports using the Plant Together API:

import { getRoomUML } from './plant.service'

const exportRoomContent = async (roomId: string) => {
  const documents = await getRoomUML(roomId)
  
  documents.forEach(({ docName, uml }) => {
    console.log(`Document: ${docName}`)
    console.log(uml)
  })
}

Next Steps

Integrate Diagrams

Use the API to integrate exports into your workflow

Collaboration Guide

Learn how to work with teams on diagrams

Private Rooms

Secure your diagrams with private room access

PlantUML Documentation

Learn more about PlantUML syntax and features

Get Started

Guides

Deployment

Overview

Export Formats

PlantUML Code

SVG

PNG

How to Export

All

Code Only

SVG Only

PNG Only

Export Package Structure

Format Details

PlantUML Code (.puml)

SVG (Scalable Vector Graphics)

PNG (Portable Network Graphics)

Export Process Details

Step-by-Step Workflow

Quick Filter Buttons

Selection Logic

Document-Level Selection

Format-Level Selection

Best Practices

Troubleshooting

Programmatic Export

Next Steps

Integrate Diagrams

Collaboration Guide

Private Rooms

PlantUML Documentation

Build docs developers (and LLMs) love

Get Started

Guides

Deployment

​Overview

​Export Formats

PlantUML Code

SVG

PNG

​How to Export

All

Code Only

SVG Only

PNG Only

​Export Package Structure

​Format Details

​PlantUML Code (.puml)

​SVG (Scalable Vector Graphics)

​PNG (Portable Network Graphics)

​Export Process Details

​Step-by-Step Workflow

​Quick Filter Buttons

​Selection Logic

​Document-Level Selection

​Format-Level Selection

​Best Practices

​Troubleshooting

​Programmatic Export

​Next Steps

Integrate Diagrams

Collaboration Guide

Private Rooms

PlantUML Documentation

Build docs developers (and LLMs) love

Overview

Export Formats

How to Export

Export Package Structure

Format Details

PlantUML Code (.puml)

SVG (Scalable Vector Graphics)

PNG (Portable Network Graphics)

Export Process Details

Step-by-Step Workflow

Quick Filter Buttons

Selection Logic

Document-Level Selection

Format-Level Selection

Best Practices

Troubleshooting

Programmatic Export

Next Steps