A web-based diagram editor supporting PlantUML, Mermaid, and Gliffy JSON sequence diagrams. Features live preview, three-way format conversion, section-based splitting for PNG export, collapsible sections, diagram sharing, and one-click editor switching.

• Three editors -- PlantUML (via Kroki), Mermaid (client-side Mermaid.js), and Gliffy JSON (converted to Mermaid for rendering)
• Live editor with syntax highlighting (CodeMirror), auto-render, and configurable debounce
• SVG preview with zoom (mouse wheel + buttons), fit-to-view, and pan
• Three-way format conversion -- PlantUML, Mermaid, and Gliffy JSON, with section marker translation
• Section collapse/expand -- toggle sections in the preview via a side gutter, and fold sections and blocks in the editor
• Split PNG export -- export diagrams as multiple PNGs in a ZIP, split by line count or by individual section
• Diagram sharing via URL-encoded links (small diagrams) or server-stored short IDs (large diagrams)
• Export to SVG and PNG
• Dark/light theme toggle, persisted across sessions
• Editor content caching in localStorage (survives page reloads)
• Collapsible panels -- maximize editor or preview independently
• Drag & drop .puml / .mmd / .gliffy files directly onto the page
• Configurable Kroki API URL via Settings
• Centralized configuration -- all settings in a single .env file
• Flexible deployment -- Docker, Docker Compose, or Vercel (with Upstash Redis)

Sequence_Diagram_Editor/
├── public/                       # Static frontend files
│   ├── puml.html                 # PlantUML editor (served at /)
│   ├── mermaid.html              # Mermaid sequence diagram editor (/mermaid)
│   ├── gliffy.html               # Gliffy JSON editor (/gliffy)
│   ├── editor.html               # Legacy standalone editor (/editor.html)
│   ├── toolbar.css               # Shared toolbar and UI styles
│   └── converters.js             # Three-way format conversion logic
├── lib/                          # Server-side modules
│   ├── storage.js                # Storage abstraction (filesystem or Upstash Redis)
│   └── api-routes.js             # Share API Express router
├── scripts/                      # CLI and shell helpers
│   ├── split-puml.js             # CLI tool to split PlantUML diagrams
│   ├── start_kroki.sh            # Start Kroki container
│   ├── start_editor.sh           # Build & start editor container
│   └── restart_editor.sh         # Rebuild & restart editor container
├── docs/                         # Design documentation
│   ├── conversion-design.md      # Conversion matrix and section markers
│   └── split-logic-design.md     # Split/export pipeline design
├── api/                          # Vercel serverless functions
│   └── index.js                  # Share API for Vercel deployment
├── data/                         # Shared diagram storage (runtime, gitignored)
├── server.js                     # Express server
├── package.json
├── .env                          # Configuration (gitignored)
├── .env.example                  # Template for .env
├── deploy.sh                     # Build & deploy script
├── Dockerfile
├── docker-compose.yml
├── vercel.json                   # Vercel deployment config
├── DEPLOYMENT.md                 # Deployment guide
├── .gitignore
└── .dockerignore

• Docker and Docker Compose (for containerized deployment)
• Kroki running (for PlantUML rendering -- the Mermaid and Gliffy editors do not need it)

Copy .env.example to .env and edit as needed:

cp .env.example .env

Key settings in .env:

bash scripts/start_kroki.sh

bash deploy.sh

All scripts source .env automatically.

Use the tab bar at the top to switch between PlantUML, Mermaid, and Gliffy editors.

• Renders via Kroki (configurable API URL in Settings)
• Supports .puml, .plantuml, .pu, .txt, .wsd files
• File browser sidebar for managing multiple diagrams
• Split export with configurable max lines per group

• Client-side rendering using Mermaid.js -- no Kroki dependency
• Supports .mmd, .mermaid, .txt files
• Zoom bar with keyboard and mouse wheel zoom

• Renders Gliffy JSON by converting to Mermaid internally
• Supports .gliffy, .json files
• Diagram / Info toggle to switch between rendered preview and JSON metadata panel
• Format button to pretty-print the JSON

All three editors support converting between formats via the Convert dropdown menu. Section markers are preserved and translated across formats.

Export to Confluence:

1. Write your diagram in any editor
2. Convert to Mermaid (if not already)
3. Copy the Mermaid code
4. In Confluence: edit page > insert Gliffy macro > Create from code > Mermaid > paste

Import from Confluence:

1. In Confluence, open the Gliffy diagram > copy the Mermaid source or export as .gliffy
2. Use the Convert menu or open the file directly in the appropriate editor

Sections partition a diagram into logical parts. Each format uses its own marker syntax, and conversions translate between them:

All three editors support exporting diagrams as multiple PNG images packaged in a ZIP file, useful for embedding in documents (e.g., Word).

For batch processing, a CLI tool is available:

node scripts/split-puml.js input.puml --png --output-dir ./output

Options: --max-lines, --group, --kroki-url, --output-dir, --png.

When a diagram contains section markers, a gutter appears on the left side of the preview with toggle buttons aligned to each section divider. Click a toggle to collapse or expand that section's content in the rendered diagram. Collapse All / Expand All buttons appear in the preview header.

The CodeMirror editor supports folding via the gutter fold markers or Ctrl+Q:

• Section folding -- fold at == ... == (PlantUML) or %% == ... == (Mermaid) markers
• Block folding -- fold group, alt, opt, loop, par, critical, break blocks (PlantUML and Mermaid)
• JSON folding -- brace/bracket folding in the Gliffy JSON editor

Click the Share button in the toolbar to generate a shareable link. All editors support sharing.

Share mode is configurable in Settings (Auto / URL only / Server only).

• http://<host>:<PORT>/#puml=<encoded> -- PlantUML, URL-encoded
• http://<host>:<PORT>/mermaid#mmd=<encoded> -- Mermaid, URL-encoded
• http://<host>:<PORT>/#id=<shortId> -- server-stored (any editor)

Payload limit: 2 MB.

Accessible via the Settings button in the toolbar (persisted in localStorage):

• Kroki PlantUML API URL (PlantUML editor only)
• Auto-render debounce (PlantUML editor only)
• Split export max lines per group
• Share mode (Auto / URL only / Server only)
• URL encoding size limit (chars)

The server supports two storage backends, configured via environment variables:

Shared diagrams are managed by three mechanisms:

1. Auto-expire (TTL) -- hourly scheduled job deletes diagrams older than SHARE_TTL_DAYS
2. Storage caps -- on every new share, oldest entries are evicted if SHARE_MAX_FILES or SHARE_MAX_SIZE_MB is exceeded
3. Manual API -- DELETE /api/share/:id or DELETE /api/share/cleanup/expired

bash deploy.sh

See DEPLOYMENT.md for detailed instructions.

npm install
node server.js

Runs on http://localhost:8001. Requires Kroki running separately for PlantUML rendering.

The project includes vercel.json and api/index.js for serverless deployment. Requires Upstash Redis for diagram sharing storage. See DEPLOYMENT.md for setup details.

Detailed design notes are available in the docs/ directory:

• docs/conversion-design.md -- conversion matrix, converters.js architecture, section marker translation
• docs/split-logic-design.md -- split/export pipeline, section markers per format, rendering flow