Business Automation Tools

🌐 Languages · English · Español · Português · Français · Deutsch · Italiano · 中文 · 日本語 · 한국어 · Русский

Create and edit BPMN, DMN, CMMN, and FORM diagrams directly in VS Code using the powerful bpmn.io toolkit. Whether you're modeling business processes, decision tables, case plans, or data capture forms, this extension provides a seamless visual editing experience — all within your editor.

• Repository: gitlab.com/devjpcb/business-automation-tools
• License: MIT
• Published by: devjpcb

Features

Editor Overview

BPMN Editor

Full-featured business process modeling editor powered by bpmn-js. Supports the complete BPMN 2.0 specification.

DMN Editor

Powerful decision modeling editor powered by dmn-js. Supports DMN 1.3 diagrams with three interactive views:

• DRD (Decision Requirements Diagram) — Visual decision graph
• Decision Table — Rule-based decision logic
• Literal Expression — Expression-based decisions

Note: SVG export is available only from the DRD view.

CMMN Editor

Case management modeling editor powered by cmmn-js. Supports the CMMN 1.1 specification.

FORM Editor

Visual form builder powered by form-js. Create and edit JSON-based data capture forms.

Shared Features

• Auto-save: All editors automatically persist changes via commandStack.changed events
• Unified SVG Export: Export any BPMN, DMN, or CMMN diagram as SVG via the Command Palette (Ctrl+Shift+P → Business Automation Tools: Export Diagram as SVG) or the dock-style toolbar
• Dock-style Toolbar: A sleek, auto-hiding toolbar sits at the bottom of every BPMN, DMN, and CMMN editor — hover to reveal, click to export
• Content Security Policy: All webviews enforce a strict CSP with nonce-based script loading

AI-Powered Diagram Generation

Generate and modify diagrams using natural language. The extension supports two integration modes:

• GitHub Copilot in VS Code via native chat participants and language model tools
• MCP clients such as Codex, Claude Code, Cline, and Continue using the same structured diagram tools over Model Context Protocol

Chat Participants

How to Use

Tip: Use the specialized participants (@bpmn, @dmn, @cmmn, @form) when you know the diagram type you want. Use @diagrams when you want the AI to infer the type from your description.

Supported Diagram Types

• BPMN — Business processes with tasks, gateways, events, and flows
• DMN — Decision tables and decision requirements diagrams (DRD)
• CMMN — Case management plans with stages, tasks, and milestones
• FORM — Data capture forms with text fields, selects, checkboxes, and more

Tip: When modifying an existing diagram, the AI preserves all existing elements and only adds what you request. The complete file is updated automatically.

MCP Support

The extension bundles a local stdio MCP server so external coding agents can create and edit BPMN, DMN, CMMN, and FORM artifacts using the same structured toolset used internally by Copilot.

Supported MCP clients:

• Codex
• Claude Code
• Cline
• Continue (Agent mode)

How it works:

1. Open the project in VS Code.
2. Run Business Automation Tools: Configure MCP Clients from the Command Palette.
3. Choose which project configuration files to write.
4. The extension copies a stable MCP runtime into its storage area and generates project-scoped configuration for:
   • ./.codex/config.toml
   • ./.mcp.json
   • ./.continue/mcpServers/business-automation-tools.json
5. For Cline, the extension copies the MCP JSON snippet to your clipboard so you can paste it into Configure MCP Servers.

Behavior notes:

• Copilot continues to use the native VS Code API. MCP is an additional integration layer for non-Copilot assistants.
• @diagrams, @bpmn, @dmn, @cmmn, and @form are Copilot Chat participants only. Codex, Claude Code, Cline, and Continue access the extension through MCP tools instead.
• Generated MCP configs use node as the default launcher command. Override it with businessAutomationTools.mcp.nodeCommand if your client environment needs a different Node executable.
• Generated or modified files are written inside the current workspace and respect businessAutomationTools.ai.defaultOutputDir.
• MCP sessions expire after 10 minutes of inactivity.
• MCP saves do not open files automatically by default. The server returns the saved file path, and BAT_OPEN_AFTER_SAVE = "never" is the recommended setting for MCP clients.
• MCP diagnostics are written to a dedicated log file that you can open with Business Automation Tools: Show MCP Logs.

Available MCP tools include:

• BPMN: bpmn_build_diagram, bpmn_create_diagram, bpmn_add_*, bpmn_load_diagram, bpmn_finalize_diagram
• DMN: dmn_build_diagram, dmn_create_diagram, dmn_add_*, dmn_set_decision_table, dmn_add_requirement, dmn_load_diagram, dmn_finalize_diagram
• CMMN: cmmn_build_diagram, cmmn_create_diagram, cmmn_add_plan_item, cmmn_add_dependency, cmmn_load_diagram, cmmn_finalize_diagram
• FORM: form_build_definition, form_create_definition, form_add_component, form_edit_component, form_remove_component, form_load_definition, form_finalize_definition

How to Prompt MCP Clients

When working in Codex, Continue, or Cline, write plain-language requests in the chat. Do not use @diagrams, @bpmn, @dmn, @cmmn, or @form there. The agent decides when to call MCP tools such as bpmn_build_diagram, dmn_build_diagram, cmmn_build_diagram, or form_build_definition.

Prompting tips:

• Start by naming the artifact type you want: BPMN, DMN, CMMN, or FORM.
• Say whether the agent should create a new file or modify an existing one.
• Describe the business domain and the main elements you need, such as tasks, gateways, rules, fields, or stages.
• When modifying an existing artifact, mention the file name or path explicitly.
• For DMN, include inputs, outputs, rules, and hit policy when they matter. For FORM, mention fields, options, groups, and validation details.

Behavior note:

• MCP clients do not expose special magic commands for this extension. You can describe the outcome you want in natural language, and the agent will use the Business Automation Tools MCP server when it decides the tools are appropriate.

Example prompts:

• Create a BPMN process for employee onboarding with HR review, IT setup, and manager approval.
• Modify order-approval.bpmn to add a validation gateway after the finance review and route rejected requests back to the requester.
• Create a DMN decision table for loan approval using credit score and monthly income, with outputs for approval status and risk level.
• Create a CMMN case plan for customer complaints with an intake task, an investigation stage, and a resolution milestone.
• Create a FORM definition for student registration with full name, email, program, enrollment date, and a submit button.
• Modify forms/student-registration.form.json to add a checkbox for scholarship applicant and a select field for campus location.

Screenshots

BPMN Editor	DMN Editor
CMMN Editor	FORM Editor
Extension Settings

Extension Settings

All settings are under the businessAutomationTools namespace. Configure them via File → Preferences → Settings or the settings.json file.

Commands

Tip: You can also export SVG by clicking the Export SVG button in the auto-hide toolbar at the bottom of any BPMN, DMN, or CMMN editor.

Building from Source

If you'd like to build and package the extension yourself:

# 1. Clone the repository
git clone https://gitlab.com/devjpcb/business-automation-tools.git
cd business-automation-tools

# 2. Install dependencies
npm install

# 3. Build webview bundles (BPMN, DMN, CMMN, FORM)
npm run precompile

# 4. Compile TypeScript
npm run compile

# 5. (Optional) Package into a .vsix file
npm run build

The bundled .vsix file can be installed via Extensions → ... → Install from VSIX.

Development Workflow

Note: After modifying any src_js/*.js file or webpack configuration, you must re-run npm run precompile.

Release Notes

Current Release — [1.7.0]

• AI-Powered Diagram Generation: Generate and modify BPMN, DMN, CMMN, and FORM diagrams using natural language via GitHub Copilot
• MCP Integration: Use the same structured diagram tools from Codex, Claude Code, Cline, and Continue
• New @diagrams chat participant for interactive diagram creation and editing
• Four Copilot tools for automatic diagram generation from any chat
• New VS Code commands to configure MCP clients and inspect MCP logs
• File attachment support: drag & drop diagram files into chat for modifications
• New setting: businessAutomationTools.ai.defaultOutputDir
• Documentation updated in 10 languages

License

This extension is licensed under the MIT License.