Saltar a contenido

ADR-008: Reusar Camunda Modeler (no rebuild)

  • Status: Accepted
  • Date: 2026-05-14
  • Tags: webapps, tooling, build-vs-buy

Context and Problem Statement

El MVP requiere que los usuarios puedan diseñar workflows en BPMN. Camunda tiene Web Modeler (SaaS) + Desktop Modeler (free). ¿Construimos nuestro propio modeler, o reusamos el de Camunda?

Decision Drivers

  • BPMN XML es el contrato (no el modeler)
  • Camunda Modeler tiene años de polish (UX maduro)
  • Camunda Desktop Modeler es FREE
  • Rebuilding modeler = 12+ meses inversión
  • bpmn-js (MIT) cubre viewer/embedded use cases

Considered Options

  1. Reusar Camunda Desktop Modeler (free, full features)
  2. Rebuild custom modeler completo (~12+ meses)
  3. Build minimal modeler con bpmn-js (~3 meses)
  4. Pago Camunda Web Modeler (SaaS pricing)
  5. Sin modeler: XML directo (developers only)

Decision Outcome

Chosen option: Reusar Camunda Desktop Modeler + embed bpmn-js viewer en Operate/Tasklist porque: - Modeler es solo authoring (no runtime) - BPMN XML estándar significa cualquier modeler funciona - Camunda Modeler es battle-tested y free - bpmn-js (MIT) cubre necesidad de viewer embedded - Cero LOC del MVP en authoring tools

Positive Consequences

  • ~12 meses + ~$500K eng investment salvado
  • Users obtienen authoring tool battle-tested
  • MVP foco en engine + monitoring (donde aporta valor)
  • bpmn-js cubre embedded viewer needs
  • Migration desde Camunda 7/8 instalaciones es trivial (mismos files)

Negative Consequences

  • Dependency en tool externo (Camunda mantiene el modeler)
  • Sin features modeler-specific custom (e.g., palette restringido a subset BPMN soportado)
  • Documentation puede confundir (Modeler usuarios esperan TODAS las features)
  • Branding: usuarios ven "Camunda" en su flow

Pros and Cons of the Options

Reusar Camunda Desktop Modeler

Pros: - FREE - Years of polish - Familiar para users de Camunda - Full BPMN spec support - Cross-platform (Win/Mac/Linux) - Maintained by Camunda

Cons: - Branding "Camunda" en flow - Sin restrictions del palette (users pueden modelar elements no soportados por MVP) - Dependency external

Rebuild custom modeler

Pros: - Brand propio - Restrict palette a elements soportados - Custom UX

Cons: - ~12 meses inversión inicial - Maintenance ongoing forever - Inferior al original (Camunda lleva años) - Open-source comparable improbable

Build minimal con bpmn-js

Pros: - Brand propio - Reusa bpmn-js modeling library

Cons: - bpmn-js modeling es trabajo significativo (3-6 meses) - Toolbar, properties panel, validation = mucho UI - Aún inferior a Camunda Modeler maduro

Camunda Web Modeler (SaaS)

Pros: - Best UX - Cloud collaboration - Integrated experience

Cons: - Paid después de trial - Vendor lock-in - Internet dependency - Camunda branded

XML directo

Pros: - Cero tools - Power users productivos

Cons: - Solo developers pueden authoring - Errors fáciles de cometer - Sin visual feedback

Estrategia híbrida implementada

flowchart TD
    A[AUTHORING - designer]
    B[DEPLOYMENT]
    C[RUNTIME - engine]
    D[VIEWING - operators, business users]
    E[END]
    A -->|"Camunda Desktop Modeler (free)<br/>Output: file.bpmn (XML)"| B
    B -->|"Upload via CLI o UI del MVP<br/>POST /v2/deployments"| C
    C -->|"Parsea y ejecuta BPMN XML"| D
    D -->|"MVP usa bpmn-js (MIT)<br/>Embed en Operate / Tasklist<br/>Read-only view + state overlay"| E

bpmn-js para viewer embedded

import BpmnViewer from 'bpmn-js/lib/NavigatedViewer';

const viewer = new BpmnViewer({ container: '#bpmn-canvas' });
await viewer.importXML(bpmnXml);

// Overlay element states
const canvas = viewer.get('canvas');
elementInstances.forEach(ei => {
  canvas.addMarker(ei.element_id, `state-${ei.state.toLowerCase()}`);
});

CSS: 

.state-active rect { fill: #FFF3CD !important; }
.state-completed rect { fill: #D4EDDA !important; }
.state-terminated rect { fill: #F8D7DA !important; }

Cero código de modeling. Solo viewing.

Documentation para users del MVP

# Diseñar Workflows

## Step 1: Instala Camunda Desktop Modeler

Descarga FREE desde: https://camunda.com/download/modeler/

## Step 2: Crea tu BPMN

- File → New File → BPMN Diagram
- Diseña usando palette estándar
- Save as .bpmn

## Step 3: Deploy al MVP

\`\`\`bash
mvp-cli deployments create my-process.bpmn
\`\`\`

O via UI: Settings → Deploy → Upload .bpmn file.

## Supported BPMN subset

El MVP soporta el siguiente subset de BPMN:
- Service tasks, User tasks, Send/Receive tasks
- Exclusive/Parallel/Event-based gateways
- Start events: None, Message, Timer, Signal
- End events: None, Message, Terminate
- Boundary events: Timer, Message, Error
- Sub-processes (embedded)
- Call activities

NOT supported (será rejected en deployment):
- Inclusive gateway
- Compensation events
- Multi-instance (Phase 2)
- ...

Users obtienen tool gratis, documentación clara sobre subset soportado, deployment trivial.

Cuándo reconsiderar

Reasons para eventualmente build modeler propio:

  1. Branding crítico: si vendes white-label SaaS y "Camunda" es problema
  2. Subset enforcement: si needs strict subset restriction (impossible con full Modeler)
  3. Custom extensions: si el MVP introduce BPMN extensions no estándar
  4. Cloud collaboration: multi-user editing simultaneous

Para 95% de casos, ninguno aplica. Reuse wins.

Costo savings

Detailed calculation:

Rebuild modeler from scratch:
  Tech lead: 6 meses × $15K = $90K
  2 devs frontend: 12 meses × 2 × $10K = $240K
  1 designer: 3 meses × $8K = $24K
  QA + testing: 3 meses × $8K = $24K
  Maintenance ongoing: 20% time perpetual = $30K/año

Total año 1: ~$408K
Total año 2+: ~$30K/año

Reuse Camunda Modeler:
  Documentation MVP: 1 semana × $2K = $2K
  bpmn-js integration en Operate: 1 semana × $2K = $2K

Total año 1: ~$4K
Total año 2+: minimal maintenance

Saving año 1: ~$404K