Vibeleaderboard
Index / app
Visit drawio.com
Category
Developer Tools
Rank
Pricing
Open Source
Type
APP
Use case
Design & Media
Interfaces
Web
Builder
jgraph
Latest release
v31.5.2
Date

About

Browser-based version of draw.io — JavaScript client-side editor for flowcharts, network diagrams, mindmaps, and general diagramming.

What it does

draw.io is a configurable visual workspace for diagrams and whiteboards. You can use the hosted deployment, publish a fork as a standalone editor, run the official container image, or install the desktop edition.

Why it's ranked here

The broad deployment choices and offline caching make it useful beyond a hosted service. Its scope is deliberately bounded: it creates diagrams and whiteboards, but does not replace an SVG editor or provide real-time co-editing.

What's good

Self-hosting is practical through GitHub Pages, Docker, or packaged web archives. The service worker precaches application assets, refreshes changed content, removes stale entries, and preserves previously fetched language resources for offline use. Export handling also accounts for mathematical typesetting.

Tradeoffs

This version lacks real-time collaborative editing. SVG output targets web embedding, not continued editing in other tools. The core team does not accept pull requests. Included icons, stencils, and templates carry restrictions for Atlassian products and its marketplace ecosystem.

How to use it well

Choose it for individuals or teams that need configurable diagramming with hosted, desktop, or self-managed deployment options. Use exports for publishing and embedding. Pick another tool when live co-editing, general SVG authoring, or community contribution through pull requests is essential.

Technical notes+

src/main/webapp/service-worker.js is generated from Workbox configuration and implements revisioned, cache-first precaching, activation cleanup, query-insensitive matching, and first-use caching for LAZY_MANIFEST language entries. src/main/webapp/js/PreConfig.js exposes deployment URL placeholders and selects manual synchronization. src/main/webapp/js/bootstrap.js parses URL parameters, switches between development sources and bundled assets, and handles Electron-specific loading. src/main/webapp/js/export.js supports XML, CSV, and Mermaid rendering paths, with asynchronous MathJax warm-up before export measurement. src/main/webapp/plugins/sql.js parses SQL table definitions into diagram cells.

Observed

License
Source code uses Apache License 2.0; bundled icons, stencils, and templates have an additional Atlassian ecosystem restriction.
Primary language
JavaScript
Deployment surfaces
GitHub Pages fork, official Docker image, desktop download, and packaged WAR files.
Interface
Configurable browser editor with a separate desktop edition.
Platform support
Chrome, Firefox, Safari, Opera, Edge, Android WebView, and iOS Safari are listed.
Contribution model
Pull requests are not accepted; development is handled entirely by the core team.

Read from README.md, src/main/webapp/service-worker.js, src/main/webapp/workbox-05b6c01b.js, src/main/webapp/js/main.js, src/main/webapp/js/open.js, src/main/webapp/js/clear.js, src/main/webapp/js/export.js, src/main/webapp/plugins/sql.js, src/main/webapp/js/PreConfig.js, src/main/webapp/js/bootstrap.js, src/main/webapp/js/embed.dev.js, src/main/webapp/plugins/flow.js, src/main/webapp/plugins/page.js.

What it can do

  • Create flowcharts

    User drawing actions and shapes → Flowchart diagram

  • Design network diagrams

    Network components and connections → Network topology diagram

  • Build mindmaps

    Ideas and hierarchical relationships → Visual mindmap

  • Export diagrams to image formats

    Created diagram → PNG, JPG, or SVG image file

  • Save diagrams to cloud storage

    Diagram and storage credentials → Stored diagram file in Google Drive, OneDrive, or Dropbox

  • Import and edit existing diagrams

    Diagram file (various formats) → Editable diagram in draw.io

  • Create organizational charts

    Organizational structure and roles → Hierarchical org chart diagram

Tags

diagramsdrawiojavascriptdesignflowcharts

Tech Stack

CSSHTMLJavaJavaScriptShell

Comments (0)

No comments yet

Editorially curated, with community endorsements as a secondary signal. Corrections welcome.