Skip to content

X6 BPMN designer for the Blazor Studio (full editor) #8928

New issue
New issue
Open
Feature
Open
X6 BPMN designer for the Blazor Studio (full editor)#8928
Feature
Labels
area:studioQuality loop area: studioelsa 3This issue is specific to Elsa 3enhancementNew feature or requestprio mediumtriaged
Milestone
3.11

Description

@sfmskywalker
sfmskywalker
opened on Oct 20, 2026

A later phase of #8898, per ADR Offer selectable BPMN designers (#8926). This comes after the bpmn-js designer ships.

Change

Turn the read-only X6 BPMN view (studio/src/modules/Elsa.Studio.Workflows/DiagramDesigners/Bpmn/) into a full editor behind the BPMN designer contract, as its own Studio module. It needs:

  • a palette;
  • BPMN connection rules: sequence flows inside a pool, message flows between pools, boundary events attached to activities;
  • DI for new shapes and edges, and label placement;
  • expanded and collapsed subprocesses, with editing at every depth;
  • undo and redo;
  • properties, using Studio's activity picker and input editors.

The X6 view stays until this designer replaces it.

Done when

  • It passes the shared designer conformance suite.
  • Its designer-specific limits are documented.

Activity

  1. sfmskywalker
    added the
    Feature
    issue type on Oct 20, 2026
  2. sfmskywalker
    added
    elsa 3This issue is specific to Elsa 3
    on Oct 20, 2026
  3. sfmskywalker
    added a parent issue on Oct 20, 2026
  4. sfmskywalker
    added
    enhancementNew feature or request
    area:studioQuality loop area: studio
    prio medium
    on Oct 22, 2026
  5. sfmskywalker
    added this to the 3.11 milestone on Oct 22, 2026
  6. sfmskywalker
    added
    triaged
    on Oct 22, 2026
  7. sfmskywalker
    added this to Elsa 3 Crewon Oct 22, 2026
  8. sfmskywalker
    moved this to Backlog in Elsa 3 Crewon Oct 22, 2026

  9. sfmskywalker commented on Oct 24, 2026

    @sfmskywalker
    sfmskywalker
    on Oct 24, 2026 – with Claude
    MemberAuthor

    [Claude] Plan, grounded in origin/main 1c8b885.

    Architecture

    The bpmn-moddle tree is the document; X6 only projects it.

    • Load: load(xml) runs withGeneratedLayout, then moddle.fromXML with the elsa descriptor. The document is swapped only on success, so a failed load keeps the current one.
    • Save: save() runs toXML(definitions, { format: true }), the serializer bpmn-js uses. Output is byte-stable, and untouched content is formatted as bpmn-js formats it.
    • Load warnings and preservation: load warnings come from the shared computeLoadWarnings. Foreign extensions and $attrs are preserved as they are in bpmn-js.

    A canvas-neutral modeling kernel in the shared Elsa.Studio.Bpmn ClientLib (src/modeling/). It holds:

    • the document;
    • the plane/DI index;
    • a command stack with undo/redo and dirty tracking by state id, ported from the bpmn-js designer;
    • commands that change semantics and DI together;
    • ElementFactory;
    • connection, drop and attach rules;
    • orthogonal edge layout;
    • label placement.

    A boundary test keeps X6 and React out of it, so the React Flow designer (#8929) can reuse it. Undo/redo lives in the kernel, not in X6's History plugin, because the X6 graph is only a projection of the document.

    The Elsa.Studio.Bpmn.X6 module follows the bpmn-js module's layout (descriptor id x6, AddX6BpmnDesigner(), esbuild ClientLib with exact pins and a size budget). The "Performed by" panel already works through getBinding/setBinding for any designer, so the activity picker and input editors come for free.

    Alternative rejected: using X6's graph JSON as the model, with a hand-written XML writer. It would have to rebuild every preservation rule (child order, namespaces, $attrs, planes), and its output would drift from bpmn-js formatting.

    Steps (the read-only view keeps working throughout)

    1. Kernel, part 1, plus spec and plan:
      • document load and save;
      • plane/DI index and plane view;
      • command stack;
      • updateProperties and setBinding;
      • Vitest round trips over the fixtures and core assets.
    2. Elsa.Studio.Bpmn.X6 module.
      • It implements the full contract and draws the document, but has no editing tools yet.
      • CI runs the shared conformance suite (contract, host, preservation, ImportEquivalence) against it as well as against bpmn-js.
    3. Basic editing:
      • move and resize with DI, with labels and waypoints following;
      • cascading delete;
      • inline name editing;
      • keyboard undo/redo.
    4. Palette, creation and replace.
    5. Sequence-flow rules, associations, edges, and boundary-event attach/detach.
    6. Pools, lanes and message flows. Includes a check that an X6-saved document opens in bpmn-js with no warnings.
    7. Subprocesses at every depth:
      • expanded subprocesses as containers;
      • collapsed subprocesses on their own plane;
      • toggling between expanded and collapsed;
      • event subprocess and transaction.
    8. Designer limits doc, packaging, and host opt-in docs. Closes "Done when".
    9. (Owner decision) Retire the read-only view.

    Decisions for the owner (none block steps 1 to 3)

    • Retiring the read-only view. It now only serves definitions without Bpmn:SourceXml, which no designer can open.
    • BPMN properties beyond the binding (conditions, timers, message refs, cancelActivity). Neither designer can edit these in the Blazor Studio today. My recommendation is an optional contract addition in a separate issue, and a documented limit for this issue.
    • Pools with their own executable process. Elsa binds one process. My recommendation is black-box pools plus a documented limit.

    Risk: the conformance suite tests the API, not editing gestures, so it goes green at step 2. Editing quality rests on the X6-specific Playwright tests, the kernel tests, and the cross-designer check in step 6.

    Generated by Claude Code

  10. sfmskywalker
    added a commit that references this issue on Oct 24, 2026

    feat(studio): add the canvas-neutral BPMN modeling kernel, part 1 (#9050

    6387055

  11. sfmskywalker commented on Oct 24, 2026

    @sfmskywalker
    sfmskywalker
    on Oct 24, 2026 – with Claude
    MemberAuthor

    [Claude] The owner has answered the spec's open questions (studio/docs/specs/bpmn-x6-designer/spec.md):

    1. Retiring the read-only view: retire it once the X6 designer ships, as the plan's last step.
    2. BPMN properties beyond the binding (conditions, timers, message references, cancelActivity): in scope for this issue. A new step adds a properties panel, X6-only, in the contract's propertiesContainer. It comes after subprocesses, before limits and packaging. A contract addition for other designers is not part of it.
    3. Pools with their own executable process: draw them as black boxes and document the limit.
    4. Where the kernel lives: still open; it does not block anything yet.

    spec.md and plan.md get these in a docs PR after #9053 merges, because #9053 edits both files.

    New plan order:

    1. Kernel part 1 ✅ (feat(studio): add the canvas-neutral BPMN modeling kernel, part 1 #9050)
    2. X6 module, drawing (feat(studio): add the X6 BPMN designer, drawing only, on the modeling kernel #9053)
    3. Basic editing
    4. Palette, create, replace
    5. Connections
    6. Pools, lanes, message flows
    7. Subprocesses
    8. Properties panel
    9. Limits doc, packaging, host docs
    10. Retire the read-only view

    Generated by Claude Code

  12. sfmskywalker
    added 9 commits that reference this issue on Oct 24, 2026

    feat(studio): add the X6 BPMN designer, drawing only, on the modeling…

    581369a

    feat(studio): move shapes in the X6 BPMN designer (#9055)

    5d1d848

    docs(studio): record the owner's X6 designer decisions (#9054)

    a0f095d

    feat(studio): resize shapes in the X6 BPMN designer (#9056)

    04330df

    feat(studio): delete elements in the X6 BPMN designer (#9057)

    6e7b9ae

    feat(studio): edit names in place in the X6 BPMN designer (#9059)

    865a681

    feat(studio): create elements from a palette in the X6 BPMN designer (#…

    bc6ec1e

    feat(studio): replace elements with another type in the X6 BPMN desig…

    9464e6d

    feat(studio): create and name groups in the X6 BPMN designer (#9063)

    28da3fd
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    area:studioQuality loop area: studioelsa 3This issue is specific to Elsa 3enhancementNew feature or requestprio mediumtriaged

    Type

    Feature

    Projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions