DiagramBlock | draw.io, Excalidraw & drawDB Blocks for WordPress

DiagramBlock | draw.io, Excalidraw & drawDB Diagrams as Editable Gutenberg Blocks

DiagramBlock lets authors draw where they write: flowcharts and architecture in draw.io, hand-drawn sketches in a bundled Excalidraw, database schemas in drawDB — each one a block that opens its editor over the post and shows a clean SVG to readers. Diagrams keep their history, can be edited together live, and live in one library with templates and imports. Nothing has to load from a third-party CDN.

Key Features

• Four blocks — draw.io diagram, Excalidraw sketch, drawDB schema, Circuit diagram — plus the [diagram id=…] shortcode and a Classic-editor button
• The editor opens in a modal over the block editor, the Classic editor and the library; a save stores the source and an SVG export together
• Excalidraw is bundled and served from your site with its fonts; draw.io runs from an instance you host (or the public embed when you switch it on); drawDB and circuit projects from the hosts you configure
• Version history on every save with element and size diffs, preview and one-click restore; retention you set
• Live collaboration on Excalidraw and draw.io: cursors and changes over WebRTC data channels, a relay through the site when a direct channel cannot open, presence badges
• A library with search, kind filter, thumbnails, authors, views and the posts that use each diagram; duplicate; export the native file, SVG or Markdown
• Templates (flowchart, mind map, architecture, sequence, ERD, org chart) and a drawDB import of the live WordPress database with relations inferred from …_id columns
• Imports: .drawio (also compressed), .excalidraw, drawDB JSON, .svg and Markdown with one diagram per fenced block
• On the page: server-rendered SVG cleaned of scripts, responsive width, captions, lazy loading for large drawings, a lightbox with zoom, pan, pinch, fullscreen and PNG download, a print view
• Roles that may draw; visitors only ever reach diagrams embedded in published content; REST diagramblock/v1, wp diagramblock list|export|import|templates|render, Site Health check

From Block to Page

1. Add a Diagram block and choose New, Existing or From template
2. Draw in the editor modal; Save stores the source, an SVG export and a version
3. The page shows the SVG inline (lazy for large drawings) with a lightbox and downloads
4. Edit again any time from the block toolbar; every save is a version you can restore

Installation

1. Download the zip from your Library
2. In wp-admin go to Plugins › Add New › Upload Plugin, choose the zip and activate it
3. A new menu entry appears in the admin sidebar; open it
4. DiagramBlock › Editors: Excalidraw is ready; paste your draw.io / drawDB / simulator hosts if you have them

Requirements

• WordPress 6.0 or newer (tested up to 7.0)
• PHP 8.0 or newer
• The block editor for blocks (the shortcode and Classic button work without it)
• Optional: your own draw.io host, or permission to use the public embed

What You Get

• DiagramBlock 1.0.0 for WordPress (diagramblock-1.0.0.zip)
• Full, readable PHP and JavaScript source, no obfuscation
• Updates for the term of your licence
• Excalidraw (MIT) bundled as a self-contained editor with its fonts

Works With

Part of the Alpha WordPress line, built with one admin kit: CodeForge, DBDoctor, CodeSell, ShareVault, SiteStats, AlphaAI Assist.

The screenshots show the plugin on our demo site with sample data.