feat: draw.io custom shapes analysis + buildable example plugin

- ANALYSIS.md: Full architecture analysis of draw.io shape systems
  (XML stencils vs JS shapes, plugin loading, desktop/web support)
- Example plugin with 5 custom shapes demonstrating JS logic:
  - StatusIndicator: conditional rendering based on status param
  - ProgressBar: computed geometry (percentage-based fill)
  - DataFlowArrow: dynamic arrows with direction/speed params
  - HexagonCluster: loop-based hexagonal grid generation
  - MetricGauge: radial gauge with arc computation + zones
- Webpack build pipeline (npm run build / build:dev / watch)
- Pre-built dist/drawio-custom-shapes.js ready for installation
- Full README with installation instructions for desktop + web
This commit is contained in:
2026-07-24 15:57:59 +00:00
parent f36600006c
commit 3347cc342c
14 changed files with 2835 additions and 2 deletions
+18
View File
@@ -0,0 +1,18 @@
{
"name": "drawio-custom-shapes",
"version": "1.0.0",
"description": "Example draw.io plugin with custom JavaScript shapes",
"main": "dist/drawio-custom-shapes.js",
"scripts": {
"build": "webpack --mode production",
"build:dev": "webpack --mode development",
"watch": "webpack --mode development --watch",
"clean": "rm -rf dist"
},
"keywords": ["drawio", "draw.io", "plugin", "shapes", "mxgraph"],
"license": "MIT",
"devDependencies": {
"webpack": "^5.90.0",
"webpack-cli": "^5.1.4"
}
}