Workflow Core Designer v0.1.0-beta

Workflow Core Designer is a modern visual drag-and-drop workflow editor and monitor built for the .NET WorkflowCore engine.

Why I built this: I've been using WorkflowCore for a while and always struggled with writing large JSON/YAML definitions by hand and debugging running processes from raw logs. There was no convenient visual tool to design workflows and see what's happening at runtime — so I decided to build one myself. While the original author continues developing the amazing backend engine, I'm focusing on this frontend to make our lives easier. Author: [Determinate] Repository: [https://github.com/determinate/wf-core-designer]

---

🚀 Project Status: Public Beta (v0.1.0-beta)

We are now in Public Beta (v0.1.0-beta)! The designer now supports full bidirectional JSON & YAML Import/Export, automatic DAG Auto-Layout, resilient node handling for unknown custom C# step types, and live backend publishing.

✨ Features in v0.1.0-beta

• 📥 Bi-directional JSON & YAML Import — Drag & drop or paste existing WorkflowCore.DSL JSON/YAML definitions into the canvas.
• 🛡️ Resilient Step Rendering — Nodes never crash or break on missing/unknown types or custom C# step classes (MyApp.Steps.CustomStep, MyApp).
• ⚡ DAG Auto-Layout Engine — Automatically arrange imported or complex workflows hierarchically with 1 click.
• 📤 Export to JSON & YAML — Download .json or .yaml files, copy raw DSL directly to clipboard, or preview syntax.
• ⚙️ Workflow Metadata & Properties — Manage Workflow ID, Version, DataType, Description, ErrorBehavior, RetryInterval, CancelConditions, and custom JSON inputs/outputs.
• 📡 Live Backend Publishing — Directly post workflow definitions to your .NET backend API (POST /api/workflows).
• 📊 Workflow Monitoring & Journals — Track execution state and step logs in real time.

---

🚀 Getting Started

Prerequisites

• Node.js v18 or newer

Installation

git clone https://github.com/determinate/wf-core-designer.git
cd wf-core-designer
npm install
npm run dev

Open http://localhost:3000 in your browser.

---

🔌 Adding Custom Activities

If your .NET backend has custom step classes (e.g., SendEmailStep, CallExternalApiStep), you can use them in two ways:

Option 1: Configure at runtime (no code changes)

1. Drag an Action node onto the canvas.
2. Click on it to open the Properties panel.
3. In the Step Type (C# Class) field, enter the fully qualified .NET class name:

MyApp.Steps.SendEmailStep, MyApp

4. The exported JSON will include this value in the StepType field, and WorkflowCore will resolve it automatically.

Option 2: Add to the sidebar permanently

1. Open src/components/Sidebar.tsx.
2. Find the NODE_TYPES array.
3. Add your custom activity:

{
  category: 'Action',
  label: 'Send Email',
  description: 'Sends an email notification',
  icon: Mail,       // import from lucide-react
  color: '#3b82f6',
},

---

📡 Backend API Integration

The designer can fetch workflow definitions from your backend and publish new ones:

1. Open the Dashboard (http://localhost:3000/).
2. Enter your backend URL in the settings field (e.g., http://localhost:5000).
3. The app will call GET /api/workflows to list existing workflows.
4. In the designer, click Publish to send the workflow JSON via POST /api/workflows.

Expected API contract

Method	Endpoint	Description
GET	/api/workflows	Returns a JSON array of workflow definitions
POST	/api/workflows	Accepts a WorkflowCore DSL JSON body, registers the workflow

---

🤝 Contributing & Support

This tool is built for the community, and I would love your help to make it robust! If you want to support the development of this project, you can do so by:

• 🐛 Opening Issues when you find a bug or a generated JSON mismatch.
• 🛠 Submitting Pull Requests to add new features or fix UI glitches.
• ⭐ Starring the repository and sharing it with other .NET developers.
• 📧 Reaching out via email: evrey2696@gmail.com

📄 License

MIT — use it, fork it, build on top of it.