Diagram Gallery

Getting Started

How It Works

1. Create: Open the diagram editor
2. Design: Use the full draw.io interface with shapes, connectors, and styling
3. Save: Click "Save" (auto-saves every 30 seconds to browser storage)
4. Export: Export as SVG for use in posts
5. Publish: Move SVG to public/diagrams/ and use in Markdown posts

Editor Features

• Full draw.io interface: All shapes and tools
• Shape libraries: Flowchart, UML, AWS, Azure, GCP, and more
• Styling: Colors, fonts, shadows, line styles
• Save/Load: Browser storage with auto-save
• Export: SVG (for posts), PNG (raster), .drawio (editable XML)
• Undo/Redo: Full history with Ctrl+Z / Ctrl+Y
• Keyboard shortcuts: All standard shortcuts supported

Keyboard Shortcuts

Using Diagrams in Posts

After exporting a diagram as SVG and saving it to public/diagrams/, use it in your posts:

        import DrawIO from '@/components/DrawIO.astro'

<DrawIO
  src="/diagrams/my-diagram.svg"
  alt="Diagram description"
  title="Optional caption"
/>
      

Storage

• Browser storage: Diagrams auto-save to localStorage while editing
• File storage: Export and save .drawio files in src/diagrams/
• Public diagrams: SVG exports go in public/diagrams/
• Version control: Commit both .drawio (editable) and .svg (published) files

Best Practices

• ✅ Save frequently (or let auto-save do it every 30 seconds)
• ✅ Download .drawio files as backup
• ✅ Organize diagrams by year: public/diagrams/2024/, etc.
• ✅ Use descriptive names: system-architecture.svg
• ✅ Always provide alt text for accessibility
• ✅ Keep SVG files under 500KB for best performance
• ❌ Don't store original .drawio files in public/
• ❌ Don't rely on localStorage as permanent storage

Documentation

For detailed information, see DRAWIO_SELF_HOSTED.md (opens in raw format)

Troubleshooting

Editor Won't Load

• Check browser console (F12) for errors
• Verify JavaScript is enabled
• Try a different browser
• Clear cache: Ctrl+Shift+Delete

Can't Export SVG

• Try exporting as PNG instead
• Reload the page and try again
• Simplify the diagram (remove extra shapes)

Diagrams Not Saving

• Check if localStorage is enabled
• Clear browser cache and try again
• Download diagram as .drawio file for backup

What's Self-Hosted?

This editor is fully self-contained:

• ✅ Diagram creation happens in your browser (client-side)
• ✅ No external services needed (except CDN for initial load)
• ✅ Your diagrams stay private in browser storage
• ✅ No tracking or analytics
• ✅ Open source (draw.io is MIT licensed on GitHub)