* feat: add frame-expert agent definition - Add frame-expert.agent.yaml with persona and workflow menu - Agent specializes in Excalidraw visual representations - Supports flowcharts, diagrams, dataflows, and wireframes Closes #890 * feat: add frame-expert workflows and shared resources - Add 4 workflows: create-flowchart, create-diagram, create-dataflow, create-wireframe - Include shared Excalidraw helpers, library, templates, and validation - Each workflow has instructions, checklist, and workflow.yaml Related to #890 * feat: register frame-expert workflows in manifest - Add create-flowchart workflow entry - Add create-diagram workflow entry - Add create-dataflow workflow entry - Add create-wireframe workflow entry Related to #890 * feat: integrate frame-expert into team configurations - Add frame-expert to default-party.csv with full agent details - Add frame-expert to team-fullstack.yaml agent list - Frame-expert now available in fullstack team workflows Related to #890
This commit is contained in:
mrsaifullah52
GitHub
parent
f14014f0c7
commit
05ccd1904c
|
|
@ -0,0 +1,32 @@
|
|||
# Frame Expert Agent Definition
|
||||
|
||||
agent:
|
||||
metadata:
|
||||
id: "{bmad_folder}/bmm/agents/frame-expert.md"
|
||||
name: Saif Ullah
|
||||
title: Visual Design & Diagramming Expert
|
||||
icon: 🎨
|
||||
module: bmm
|
||||
|
||||
persona:
|
||||
role: Expert Visual Designer & Diagramming Specialist
|
||||
identity: Expert who creates visual representations using Excalidraw with optimized, reusable components. Specializes in flowcharts, diagrams, wireframes, ERDs, UML diagrams, mind maps, data flows, and API mappings.
|
||||
communication_style: Visual-first, structured, detail-oriented, composition-focused. Presents options as numbered lists for easy selection.
|
||||
principles: Composition Over Creation - Use reusable components and templates. Minimal Payload - Strip unnecessary metadata, optimize serialization. Reference-Based Design - Use library references instead of redefining components. Structured Approach - Follow task-specific workflows for different diagram types. Clean Output - Remove history, deleted elements, unused styles from final output. JSON Validation - Always validate JSON syntax after saving files using validation tool. Error Recovery - NEVER delete files due to syntax errors, always fix them using error location information.
|
||||
|
||||
menu:
|
||||
- trigger: flowchart
|
||||
workflow: "{project-root}/{bmad_folder}/bmm/workflows/frame-expert/create-flowchart/workflow.yaml"
|
||||
description: Create flowchart for processes, pipelines, or logic flows
|
||||
|
||||
- trigger: diagram
|
||||
workflow: "{project-root}/{bmad_folder}/bmm/workflows/frame-expert/create-diagram/workflow.yaml"
|
||||
description: Create system architecture or general technical diagram
|
||||
|
||||
- trigger: dataflow
|
||||
workflow: "{project-root}/{bmad_folder}/bmm/workflows/frame-expert/create-dataflow/workflow.yaml"
|
||||
description: Create data flow diagram
|
||||
|
||||
- trigger: wireframe
|
||||
workflow: "{project-root}/{bmad_folder}/bmm/workflows/frame-expert/create-wireframe/workflow.yaml"
|
||||
description: Create website or app wireframe
|
||||
|
|
@ -17,3 +17,4 @@ name,displayName,title,icon,role,identity,communicationStyle,principles,module,p
|
|||
"lateral-thinker","Edward de Bono","Lateral Thinking Pioneer","🧩","Creator of Creative Thinking Tools","Inventor of lateral thinking and Six Thinking Hats methodology. Master of deliberate creativity through systematic pattern-breaking techniques.","Talks in structured thinking frameworks - uses colored hat metaphors, proposes deliberate provocations, breaks patterns methodically","Logic gets you from A to B. Creativity gets you everywhere else. Use tools to escape habitual thinking patterns.","cis",""
|
||||
"mythic-storyteller","Joseph Campbell","Mythic Storyteller","🌟","Master of the Hero's Journey + Archetypal Wisdom","Scholar who decoded the universal story patterns across all cultures. Expert in mythology, comparative religion, and archetypal narratives.","Speaks in mythological metaphors and archetypal patterns - EVERY story is a hero's journey, references ancient wisdom","Follow your bliss. All stories share the monomyth. Myths reveal universal human truths. The call to adventure is irresistible.","cis",""
|
||||
"combinatorial-genius","Steve Jobs","Combinatorial Genius","🍎","Master of Intersection Thinking + Taste Curator","Legendary innovator who connected technology with liberal arts. Master at seeing patterns across disciplines and combining them into elegant products.","Talks in reality distortion field mode - insanely great, magical, revolutionary, makes impossible seem inevitable","Innovation happens at intersections. Taste is about saying NO to 1000 things. Stay hungry stay foolish. Simplicity is sophistication.","cis",""
|
||||
"frame-expert","Saif Ullah","Visual Design & Diagramming Expert","🎨","Expert Visual Designer & Diagramming Specialist","Expert who creates visual representations using Excalidraw with optimized, reusable components. Specializes in flowcharts, diagrams, wireframes, ERDs, UML diagrams, mind maps, data flows, and API mappings.","Visual-first, structured, detail-oriented, composition-focused. Presents options as numbered lists for easy selection.","Composition Over Creation - Use reusable components and templates. Minimal Payload - Strip unnecessary metadata. Reference-Based Design - Use library references. Structured Approach - Follow task-specific workflows. Clean Output - Remove history and unused styles.","bmm","bmad/bmm/agents/frame-expert.md"
|
||||
|
|
|
|||
|
|
|
@ -9,4 +9,5 @@ agents:
|
|||
- pm
|
||||
- sm
|
||||
- ux-designer
|
||||
- frame-expert
|
||||
party: "./default-party.csv"
|
||||
|
|
|
|||
|
|
@ -0,0 +1,127 @@
|
|||
# Excalidraw Element Creation Guidelines
|
||||
|
||||
## Text Width Calculation
|
||||
|
||||
For text elements inside shapes (labels):
|
||||
|
||||
```
|
||||
text_width = (text.length × fontSize × 0.6) + 20
|
||||
```
|
||||
|
||||
Round to nearest 10 for grid alignment.
|
||||
|
||||
## Element Grouping Rules
|
||||
|
||||
**CRITICAL:** When creating shapes with labels:
|
||||
|
||||
1. Generate unique IDs:
|
||||
- `shape-id` for the shape
|
||||
- `text-id` for the text
|
||||
- `group-id` for the group
|
||||
|
||||
2. Shape element must have:
|
||||
- `groupIds: [group-id]`
|
||||
- `boundElements: [{type: "text", id: text-id}]`
|
||||
|
||||
3. Text element must have:
|
||||
- `containerId: shape-id`
|
||||
- `groupIds: [group-id]` (SAME as shape)
|
||||
- `textAlign: "center"`
|
||||
- `verticalAlign: "middle"`
|
||||
- `width: calculated_width`
|
||||
|
||||
## Grid Alignment
|
||||
|
||||
- Snap all `x`, `y` coordinates to 20px grid
|
||||
- Formula: `Math.round(value / 20) * 20`
|
||||
- Spacing between elements: 60px minimum
|
||||
|
||||
## Arrow Creation
|
||||
|
||||
### Straight Arrows
|
||||
|
||||
Use for forward flow (left-to-right, top-to-bottom):
|
||||
|
||||
```json
|
||||
{
|
||||
"type": "arrow",
|
||||
"startBinding": {
|
||||
"elementId": "source-shape-id",
|
||||
"focus": 0,
|
||||
"gap": 10
|
||||
},
|
||||
"endBinding": {
|
||||
"elementId": "target-shape-id",
|
||||
"focus": 0,
|
||||
"gap": 10
|
||||
},
|
||||
"points": [[0, 0], [distance_x, distance_y]]
|
||||
}
|
||||
```
|
||||
|
||||
### Elbow Arrows
|
||||
|
||||
Use for upward flow, backward flow, or complex routing:
|
||||
|
||||
```json
|
||||
{
|
||||
"type": "arrow",
|
||||
"startBinding": {...},
|
||||
"endBinding": {...},
|
||||
"points": [
|
||||
[0, 0],
|
||||
[intermediate_x, 0],
|
||||
[intermediate_x, intermediate_y],
|
||||
[final_x, final_y]
|
||||
],
|
||||
"elbowed": true
|
||||
}
|
||||
```
|
||||
|
||||
### Update Connected Shapes
|
||||
|
||||
After creating arrow, update `boundElements` on both connected shapes:
|
||||
|
||||
```json
|
||||
{
|
||||
"id": "shape-id",
|
||||
"boundElements": [
|
||||
{ "type": "text", "id": "text-id" },
|
||||
{ "type": "arrow", "id": "arrow-id" }
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
## Theme Application
|
||||
|
||||
Theme colors should be applied consistently:
|
||||
|
||||
- **Shapes**: `backgroundColor` from theme primary fill
|
||||
- **Borders**: `strokeColor` from theme accent
|
||||
- **Text**: `strokeColor` = "#1e1e1e" (dark text)
|
||||
- **Arrows**: `strokeColor` from theme accent
|
||||
|
||||
## Validation Checklist
|
||||
|
||||
Before saving, verify:
|
||||
|
||||
- [ ] All shapes with labels have matching `groupIds`
|
||||
- [ ] All text elements have `containerId` pointing to parent shape
|
||||
- [ ] Text width calculated properly (no cutoff)
|
||||
- [ ] Text alignment set (`textAlign` + `verticalAlign`)
|
||||
- [ ] All elements snapped to 20px grid
|
||||
- [ ] All arrows have `startBinding` and `endBinding`
|
||||
- [ ] `boundElements` array updated on connected shapes
|
||||
- [ ] Theme colors applied consistently
|
||||
- [ ] No metadata or history in final output
|
||||
- [ ] All IDs are unique
|
||||
|
||||
## Optimization
|
||||
|
||||
Remove from final output:
|
||||
|
||||
- `appState` object
|
||||
- `files` object (unless images used)
|
||||
- All elements with `isDeleted: true`
|
||||
- Unused library items
|
||||
- Version history
|
||||
|
|
@ -0,0 +1,90 @@
|
|||
{
|
||||
"type": "excalidrawlib",
|
||||
"version": 2,
|
||||
"library": [
|
||||
{
|
||||
"id": "start-end-circle",
|
||||
"status": "published",
|
||||
"elements": [
|
||||
{
|
||||
"type": "ellipse",
|
||||
"width": 120,
|
||||
"height": 60,
|
||||
"strokeColor": "#1976d2",
|
||||
"backgroundColor": "#e3f2fd",
|
||||
"fillStyle": "solid",
|
||||
"strokeWidth": 2,
|
||||
"roughness": 0
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "process-rectangle",
|
||||
"status": "published",
|
||||
"elements": [
|
||||
{
|
||||
"type": "rectangle",
|
||||
"width": 160,
|
||||
"height": 80,
|
||||
"strokeColor": "#1976d2",
|
||||
"backgroundColor": "#e3f2fd",
|
||||
"fillStyle": "solid",
|
||||
"strokeWidth": 2,
|
||||
"roughness": 0,
|
||||
"roundness": {
|
||||
"type": 3,
|
||||
"value": 8
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "decision-diamond",
|
||||
"status": "published",
|
||||
"elements": [
|
||||
{
|
||||
"type": "diamond",
|
||||
"width": 140,
|
||||
"height": 100,
|
||||
"strokeColor": "#f57c00",
|
||||
"backgroundColor": "#fff3e0",
|
||||
"fillStyle": "solid",
|
||||
"strokeWidth": 2,
|
||||
"roughness": 0
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "data-store",
|
||||
"status": "published",
|
||||
"elements": [
|
||||
{
|
||||
"type": "rectangle",
|
||||
"width": 140,
|
||||
"height": 80,
|
||||
"strokeColor": "#388e3c",
|
||||
"backgroundColor": "#e8f5e9",
|
||||
"fillStyle": "solid",
|
||||
"strokeWidth": 2,
|
||||
"roughness": 0
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "external-entity",
|
||||
"status": "published",
|
||||
"elements": [
|
||||
{
|
||||
"type": "rectangle",
|
||||
"width": 120,
|
||||
"height": 80,
|
||||
"strokeColor": "#7b1fa2",
|
||||
"backgroundColor": "#f3e5f5",
|
||||
"fillStyle": "solid",
|
||||
"strokeWidth": 3,
|
||||
"roughness": 0
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,127 @@
|
|||
flowchart:
|
||||
viewport:
|
||||
x: 0
|
||||
y: 0
|
||||
zoom: 1
|
||||
grid:
|
||||
size: 20
|
||||
spacing:
|
||||
vertical: 100
|
||||
horizontal: 180
|
||||
elements:
|
||||
start:
|
||||
type: ellipse
|
||||
width: 120
|
||||
height: 60
|
||||
label: "Start"
|
||||
process:
|
||||
type: rectangle
|
||||
width: 160
|
||||
height: 80
|
||||
roundness: 8
|
||||
decision:
|
||||
type: diamond
|
||||
width: 140
|
||||
height: 100
|
||||
end:
|
||||
type: ellipse
|
||||
width: 120
|
||||
height: 60
|
||||
label: "End"
|
||||
|
||||
diagram:
|
||||
viewport:
|
||||
x: 0
|
||||
y: 0
|
||||
zoom: 1
|
||||
grid:
|
||||
size: 20
|
||||
spacing:
|
||||
vertical: 120
|
||||
horizontal: 200
|
||||
elements:
|
||||
component:
|
||||
type: rectangle
|
||||
width: 180
|
||||
height: 100
|
||||
roundness: 8
|
||||
database:
|
||||
type: rectangle
|
||||
width: 140
|
||||
height: 80
|
||||
service:
|
||||
type: rectangle
|
||||
width: 160
|
||||
height: 90
|
||||
roundness: 12
|
||||
external:
|
||||
type: rectangle
|
||||
width: 140
|
||||
height: 80
|
||||
|
||||
wireframe:
|
||||
viewport:
|
||||
x: 0
|
||||
y: 0
|
||||
zoom: 0.8
|
||||
grid:
|
||||
size: 20
|
||||
spacing:
|
||||
vertical: 40
|
||||
horizontal: 40
|
||||
elements:
|
||||
container:
|
||||
type: rectangle
|
||||
width: 800
|
||||
height: 600
|
||||
strokeStyle: solid
|
||||
strokeWidth: 2
|
||||
header:
|
||||
type: rectangle
|
||||
width: 800
|
||||
height: 80
|
||||
button:
|
||||
type: rectangle
|
||||
width: 120
|
||||
height: 40
|
||||
roundness: 4
|
||||
input:
|
||||
type: rectangle
|
||||
width: 300
|
||||
height: 40
|
||||
roundness: 4
|
||||
text:
|
||||
type: text
|
||||
fontSize: 16
|
||||
|
||||
dataflow:
|
||||
viewport:
|
||||
x: 0
|
||||
y: 0
|
||||
zoom: 1
|
||||
grid:
|
||||
size: 20
|
||||
spacing:
|
||||
vertical: 120
|
||||
horizontal: 200
|
||||
elements:
|
||||
process:
|
||||
type: ellipse
|
||||
width: 140
|
||||
height: 80
|
||||
label: "Process"
|
||||
datastore:
|
||||
type: rectangle
|
||||
width: 140
|
||||
height: 80
|
||||
label: "Data Store"
|
||||
external:
|
||||
type: rectangle
|
||||
width: 120
|
||||
height: 80
|
||||
strokeWidth: 3
|
||||
label: "External Entity"
|
||||
dataflow:
|
||||
type: arrow
|
||||
strokeWidth: 2
|
||||
label: "Data Flow"
|
||||
|
|
@ -0,0 +1,79 @@
|
|||
# JSON Validation Instructions
|
||||
|
||||
## Purpose
|
||||
|
||||
Validate Excalidraw JSON files after saving to catch syntax errors (missing commas, brackets, quotes).
|
||||
|
||||
## How to Validate
|
||||
|
||||
Use Node.js built-in JSON parsing to validate the file:
|
||||
|
||||
```bash
|
||||
node -e "JSON.parse(require('fs').readFileSync('FILE_PATH', 'utf8')); console.log('✓ Valid JSON')"
|
||||
```
|
||||
|
||||
Replace `FILE_PATH` with the actual file path.
|
||||
|
||||
## Exit Codes
|
||||
|
||||
- Exit code 0 = Valid JSON
|
||||
- Exit code 1 = Invalid JSON (syntax error)
|
||||
|
||||
## Error Output
|
||||
|
||||
If invalid, Node.js will output:
|
||||
|
||||
- Error message with description
|
||||
- Position in file where error occurred
|
||||
- Line and column information (if available)
|
||||
|
||||
## Common Errors and Fixes
|
||||
|
||||
### Missing Comma
|
||||
|
||||
```
|
||||
SyntaxError: Expected ',' or '}' after property value
|
||||
```
|
||||
|
||||
**Fix:** Add comma after the property value
|
||||
|
||||
### Missing Bracket/Brace
|
||||
|
||||
```
|
||||
SyntaxError: Unexpected end of JSON input
|
||||
```
|
||||
|
||||
**Fix:** Add missing closing bracket `]` or brace `}`
|
||||
|
||||
### Extra Comma (Trailing)
|
||||
|
||||
```
|
||||
SyntaxError: Unexpected token ,
|
||||
```
|
||||
|
||||
**Fix:** Remove the trailing comma before `]` or `}`
|
||||
|
||||
### Missing Quote
|
||||
|
||||
```
|
||||
SyntaxError: Unexpected token
|
||||
```
|
||||
|
||||
**Fix:** Add missing quote around string value
|
||||
|
||||
## Workflow Integration
|
||||
|
||||
After saving an Excalidraw file, run validation:
|
||||
|
||||
1. Save the file
|
||||
2. Run: `node -e "JSON.parse(require('fs').readFileSync('{{save_location}}', 'utf8')); console.log('✓ Valid JSON')"`
|
||||
3. If validation fails:
|
||||
- Read the error message for line/position
|
||||
- Open the file at that location
|
||||
- Fix the syntax error
|
||||
- Save and re-validate
|
||||
4. Repeat until validation passes
|
||||
|
||||
## Critical Rule
|
||||
|
||||
**NEVER delete the file due to validation errors - always fix the syntax error at the reported location.**
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
# Create Data Flow Diagram - Validation Checklist
|
||||
|
||||
## DFD Notation
|
||||
|
||||
- [ ] Processes shown as circles/ellipses
|
||||
- [ ] Data stores shown as parallel lines or rectangles
|
||||
- [ ] External entities shown as rectangles
|
||||
- [ ] Data flows shown as labeled arrows
|
||||
- [ ] Follows standard DFD notation
|
||||
|
||||
## Structure
|
||||
|
||||
- [ ] All processes numbered correctly
|
||||
- [ ] All data flows labeled with data names
|
||||
- [ ] All data stores named appropriately
|
||||
- [ ] External entities clearly identified
|
||||
|
||||
## Completeness
|
||||
|
||||
- [ ] All inputs and outputs accounted for
|
||||
- [ ] No orphaned processes (unconnected)
|
||||
- [ ] Data conservation maintained
|
||||
- [ ] Level appropriate (context/level 0/level 1)
|
||||
|
||||
## Layout
|
||||
|
||||
- [ ] Logical flow direction (left to right, top to bottom)
|
||||
- [ ] No crossing data flows where avoidable
|
||||
- [ ] Balanced layout
|
||||
- [ ] Grid alignment maintained
|
||||
|
||||
## Technical Quality
|
||||
|
||||
- [ ] All elements properly grouped
|
||||
- [ ] Arrows have proper bindings
|
||||
- [ ] Text readable and properly sized
|
||||
- [ ] No elements with `isDeleted: true`
|
||||
- [ ] JSON is valid
|
||||
- [ ] File saved to correct location
|
||||
|
|
@ -0,0 +1,131 @@
|
|||
# Create Data Flow Diagram - Workflow Instructions
|
||||
|
||||
```xml
|
||||
<critical>The workflow execution engine is governed by: {project_root}/{bmad_folder}/core/tasks/workflow.xml</critical>
|
||||
<critical>You MUST have already loaded and processed: {installed_path}/workflow.yaml</critical>
|
||||
<critical>This workflow creates data flow diagrams (DFD) in Excalidraw format.</critical>
|
||||
|
||||
<workflow>
|
||||
|
||||
<step n="0" goal="Contextual Analysis">
|
||||
<action>Review user's request and extract: DFD level, processes, data stores, external entities, save location</action>
|
||||
<check if="ALL requirements clear"><action>Skip to Step 4</action></check>
|
||||
</step>
|
||||
|
||||
<step n="1" goal="Identify DFD Level" elicit="true">
|
||||
<action>Ask: "What level of DFD do you need?"</action>
|
||||
<action>Present options:
|
||||
1. Context Diagram (Level 0) - Single process showing system boundaries
|
||||
2. Level 1 DFD - Major processes and data flows
|
||||
3. Level 2 DFD - Detailed sub-processes
|
||||
4. Custom - Specify your requirements
|
||||
</action>
|
||||
<action>WAIT for selection, store in {{dfd_level}}</action>
|
||||
</step>
|
||||
|
||||
<step n="2" goal="Gather Requirements" elicit="true">
|
||||
<action>Ask process count</action>
|
||||
<action>Ask data store count</action>
|
||||
<action>Ask external entity count</action>
|
||||
<action>Ask save location</action>
|
||||
</step>
|
||||
|
||||
<step n="3" goal="Theme Setup" elicit="true">
|
||||
<action>Check for existing theme.json, ask to use if exists</action>
|
||||
<check if="no existing theme">
|
||||
<action>Ask: "Choose a DFD color scheme:"</action>
|
||||
<action>Present numbered options:
|
||||
1. Standard DFD
|
||||
- Process: #e3f2fd (light blue)
|
||||
- Data Store: #e8f5e9 (light green)
|
||||
- External Entity: #f3e5f5 (light purple)
|
||||
- Border: #1976d2 (blue)
|
||||
|
||||
2. Colorful DFD
|
||||
- Process: #fff9c4 (light yellow)
|
||||
- Data Store: #c5e1a5 (light lime)
|
||||
- External Entity: #ffccbc (light coral)
|
||||
- Border: #f57c00 (orange)
|
||||
|
||||
3. Minimal DFD
|
||||
- Process: #f5f5f5 (light gray)
|
||||
- Data Store: #eeeeee (gray)
|
||||
- External Entity: #e0e0e0 (medium gray)
|
||||
- Border: #616161 (dark gray)
|
||||
|
||||
4. Custom - Define your own colors
|
||||
</action>
|
||||
<action>WAIT for selection</action>
|
||||
<action>Create theme.json based on selection</action>
|
||||
</check>
|
||||
</step>
|
||||
|
||||
<step n="4" goal="Plan DFD Structure">
|
||||
<action>List all processes with numbers (1.0, 2.0, etc.)</action>
|
||||
<action>List all data stores (D1, D2, etc.)</action>
|
||||
<action>List all external entities</action>
|
||||
<action>Map all data flows with labels</action>
|
||||
<action>Show planned structure, confirm with user</action>
|
||||
</step>
|
||||
|
||||
<step n="5" goal="Load Resources">
|
||||
<action>Load {{templates}} and extract `dataflow` section</action>
|
||||
<action>Load {{library}}</action>
|
||||
<action>Load theme.json</action>
|
||||
<action>Load {{helpers}}</action>
|
||||
</step>
|
||||
|
||||
<step n="6" goal="Build DFD Elements">
|
||||
<critical>Follow standard DFD notation from {{helpers}}</critical>
|
||||
|
||||
<substep>Build Order:
|
||||
1. External entities (rectangles, bold border)
|
||||
2. Processes (circles/ellipses with numbers)
|
||||
3. Data stores (parallel lines or rectangles)
|
||||
4. Data flows (labeled arrows)
|
||||
</substep>
|
||||
|
||||
<substep>DFD Rules:
|
||||
- Processes: Numbered (1.0, 2.0), verb phrases
|
||||
- Data stores: Named (D1, D2), noun phrases
|
||||
- External entities: Named, noun phrases
|
||||
- Data flows: Labeled with data names, arrows show direction
|
||||
- No direct flow between external entities
|
||||
- No direct flow between data stores
|
||||
</substep>
|
||||
|
||||
<substep>Layout:
|
||||
- External entities at edges
|
||||
- Processes in center
|
||||
- Data stores between processes
|
||||
- Minimize crossing flows
|
||||
- Left-to-right or top-to-bottom flow
|
||||
</substep>
|
||||
</step>
|
||||
|
||||
<step n="7" goal="Optimize and Save">
|
||||
<action>Verify DFD rules compliance</action>
|
||||
<action>Strip unused elements and elements with isDeleted: true</action>
|
||||
<action>Save to {{save_location}}</action>
|
||||
</step>
|
||||
|
||||
<step n="8" goal="Validate JSON Syntax">
|
||||
<critical>NEVER delete the file if validation fails - always fix syntax errors</critical>
|
||||
<action>Run: node -e "JSON.parse(require('fs').readFileSync('{{save_location}}', 'utf8')); console.log('✓ Valid JSON')"</action>
|
||||
<check if="validation fails (exit code 1)">
|
||||
<action>Read the error message carefully - it shows the syntax error and position</action>
|
||||
<action>Open the file and navigate to the error location</action>
|
||||
<action>Fix the syntax error (add missing comma, bracket, or quote as indicated)</action>
|
||||
<action>Save the file</action>
|
||||
<action>Re-run validation with the same command</action>
|
||||
<action>Repeat until validation passes</action>
|
||||
</check>
|
||||
<action>Once validation passes, confirm with user</action>
|
||||
</step>
|
||||
|
||||
<step n="9" goal="Validate Content">
|
||||
<invoke-task>Validate against {{validation}}</invoke-task>
|
||||
</step>
|
||||
|
||||
</workflow>
|
||||
```
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
name: create-dataflow
|
||||
description: "Create data flow diagrams (DFD) in Excalidraw format"
|
||||
author: "BMad"
|
||||
|
||||
installed_path: "{project-root}/{bmad_folder}/bmm/workflows/frame-expert/create-dataflow"
|
||||
shared_path: "{project-root}/{bmad_folder}/bmm/workflows/frame-expert/_shared"
|
||||
instructions: "{installed_path}/instructions.md"
|
||||
validation: "{installed_path}/checklist.md"
|
||||
|
||||
helpers: "{shared_path}/excalidraw-helpers.md"
|
||||
templates: "{shared_path}/excalidraw-templates.yaml"
|
||||
library: "{shared_path}/excalidraw-library.json"
|
||||
|
||||
variables:
|
||||
dfd_level: ""
|
||||
process_count: ""
|
||||
datastore_count: ""
|
||||
external_entities: ""
|
||||
save_location: ""
|
||||
|
||||
default_output_file: "{project-root}/docs/dataflow/dfd-{timestamp}.excalidraw"
|
||||
|
||||
standalone: true
|
||||
web_bundle: false
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
# Create Diagram - Validation Checklist
|
||||
|
||||
## Element Structure
|
||||
|
||||
- [ ] All components with labels have matching `groupIds`
|
||||
- [ ] All text elements have `containerId` pointing to parent component
|
||||
- [ ] Text width calculated properly (no cutoff)
|
||||
- [ ] Text alignment appropriate for diagram type
|
||||
|
||||
## Layout and Alignment
|
||||
|
||||
- [ ] All elements snapped to 20px grid
|
||||
- [ ] Component spacing consistent (40px/60px)
|
||||
- [ ] Hierarchical alignment maintained
|
||||
- [ ] No overlapping elements
|
||||
|
||||
## Connections
|
||||
|
||||
- [ ] All arrows have `startBinding` and `endBinding`
|
||||
- [ ] `boundElements` array updated on connected components
|
||||
- [ ] Arrow routing avoids overlaps
|
||||
- [ ] Relationship types clearly indicated
|
||||
|
||||
## Notation and Standards
|
||||
|
||||
- [ ] Follows specified notation standard (UML/ERD/etc)
|
||||
- [ ] Symbols used correctly
|
||||
- [ ] Cardinality/multiplicity shown where needed
|
||||
- [ ] Labels and annotations clear
|
||||
|
||||
## Theme and Styling
|
||||
|
||||
- [ ] Theme colors applied consistently
|
||||
- [ ] Component types visually distinguishable
|
||||
- [ ] Text is readable
|
||||
- [ ] Professional appearance
|
||||
|
||||
## Output Quality
|
||||
|
||||
- [ ] Element count under 80
|
||||
- [ ] No elements with `isDeleted: true`
|
||||
- [ ] JSON is valid
|
||||
- [ ] File saved to correct location
|
||||
|
|
@ -0,0 +1,142 @@
|
|||
# Create Diagram - Workflow Instructions
|
||||
|
||||
```xml
|
||||
<critical>The workflow execution engine is governed by: {project_root}/{bmad_folder}/core/tasks/workflow.xml</critical>
|
||||
<critical>You MUST have already loaded and processed: {installed_path}/workflow.yaml</critical>
|
||||
<critical>This workflow creates system architecture diagrams, ERDs, UML diagrams, or general technical diagrams in Excalidraw format.</critical>
|
||||
|
||||
<workflow>
|
||||
|
||||
<step n="0" goal="Contextual Analysis">
|
||||
<action>Review user's request and extract: diagram type, components/entities, relationships, notation preferences, save location</action>
|
||||
<check if="ALL requirements clear"><action>Skip to Step 5</action></check>
|
||||
<check if="SOME requirements clear"><action>Only ask about missing info in Steps 1-2</action></check>
|
||||
</step>
|
||||
|
||||
<step n="1" goal="Identify Diagram Type" elicit="true">
|
||||
<action>Ask: "What type of technical diagram do you need?"</action>
|
||||
<action>Present options:
|
||||
1. System Architecture
|
||||
2. Entity-Relationship Diagram (ERD)
|
||||
3. UML Class Diagram
|
||||
4. UML Sequence Diagram
|
||||
5. UML Use Case Diagram
|
||||
6. Network Diagram
|
||||
7. Other
|
||||
</action>
|
||||
<action>WAIT for selection, store in {{diagram_type}}</action>
|
||||
</step>
|
||||
|
||||
<step n="2" goal="Gather Requirements" elicit="true">
|
||||
<action>Ask component count (Small/Medium/Large/Very Large)</action>
|
||||
<action>Ask relationship types (Simple/Hierarchical/Many-to-many/Mixed)</action>
|
||||
<action>Ask notation standard (Standard/Simplified/Strict UML-ERD/Company specific)</action>
|
||||
<action>Ask save location (Default/Custom/Architecture folder/Specific folder)</action>
|
||||
<action>Store all responses in variables</action>
|
||||
</step>
|
||||
|
||||
<step n="3" goal="Check for Existing Theme" elicit="true">
|
||||
<action>Check if theme.json exists at output location</action>
|
||||
<check if="exists"><action>Ask to use it, load if yes, else proceed to Step 4</action></check>
|
||||
<check if="not exists"><action>Proceed to Step 4</action></check>
|
||||
</step>
|
||||
|
||||
<step n="4" goal="Create Theme" elicit="true">
|
||||
<action>Ask: "Choose a color scheme for your diagram:"</action>
|
||||
<action>Present numbered options:
|
||||
1. Professional
|
||||
- Component: #e3f2fd (light blue)
|
||||
- Database: #e8f5e9 (light green)
|
||||
- Service: #fff3e0 (light orange)
|
||||
- Border: #1976d2 (blue)
|
||||
|
||||
2. Colorful
|
||||
- Component: #e1bee7 (light purple)
|
||||
- Database: #c5e1a5 (light lime)
|
||||
- Service: #ffccbc (light coral)
|
||||
- Border: #7b1fa2 (purple)
|
||||
|
||||
3. Minimal
|
||||
- Component: #f5f5f5 (light gray)
|
||||
- Database: #eeeeee (gray)
|
||||
- Service: #e0e0e0 (medium gray)
|
||||
- Border: #616161 (dark gray)
|
||||
|
||||
4. Custom - Define your own colors
|
||||
</action>
|
||||
<action>WAIT for selection</action>
|
||||
<action>Create theme.json based on selection</action>
|
||||
<action>Show preview and confirm</action>
|
||||
</step>
|
||||
|
||||
<step n="5" goal="Plan Diagram Structure">
|
||||
<action>List all components/entities</action>
|
||||
<action>Map all relationships</action>
|
||||
<action>Show planned layout</action>
|
||||
<action>Ask: "Structure looks correct? (yes/no)"</action>
|
||||
<check if="no"><action>Adjust and repeat</action></check>
|
||||
</step>
|
||||
|
||||
<step n="6" goal="Load Resources">
|
||||
<action>Load {{templates}} and extract `diagram` section</action>
|
||||
<action>Load {{library}}</action>
|
||||
<action>Load theme.json and merge with template</action>
|
||||
<action>Load {{helpers}} for guidelines</action>
|
||||
</step>
|
||||
|
||||
<step n="7" goal="Build Diagram Elements">
|
||||
<critical>Follow {{helpers}} for proper element creation</critical>
|
||||
|
||||
<substep>For Each Component:
|
||||
- Generate unique IDs (component-id, text-id, group-id)
|
||||
- Create shape with groupIds
|
||||
- Calculate text width
|
||||
- Create text with containerId and matching groupIds
|
||||
- Add boundElements
|
||||
</substep>
|
||||
|
||||
<substep>For Each Connection:
|
||||
- Determine arrow type (straight/elbow)
|
||||
- Create with startBinding and endBinding
|
||||
- Update boundElements on both components
|
||||
</substep>
|
||||
|
||||
<substep>Build Order by Type:
|
||||
- Architecture: Services → Databases → Connections → Labels
|
||||
- ERD: Entities → Attributes → Relationships → Cardinality
|
||||
- UML Class: Classes → Attributes → Methods → Relationships
|
||||
- UML Sequence: Actors → Lifelines → Messages → Returns
|
||||
- UML Use Case: Actors → Use Cases → Relationships
|
||||
</substep>
|
||||
|
||||
<substep>Alignment:
|
||||
- Snap to 20px grid
|
||||
- Space: 40px between components, 60px between sections
|
||||
</substep>
|
||||
</step>
|
||||
|
||||
<step n="8" goal="Optimize and Save">
|
||||
<action>Strip unused elements and elements with isDeleted: true</action>
|
||||
<action>Save to {{save_location}}</action>
|
||||
</step>
|
||||
|
||||
<step n="9" goal="Validate JSON Syntax">
|
||||
<critical>NEVER delete the file if validation fails - always fix syntax errors</critical>
|
||||
<action>Run: node -e "JSON.parse(require('fs').readFileSync('{{save_location}}', 'utf8')); console.log('✓ Valid JSON')"</action>
|
||||
<check if="validation fails (exit code 1)">
|
||||
<action>Read the error message carefully - it shows the syntax error and position</action>
|
||||
<action>Open the file and navigate to the error location</action>
|
||||
<action>Fix the syntax error (add missing comma, bracket, or quote as indicated)</action>
|
||||
<action>Save the file</action>
|
||||
<action>Re-run validation with the same command</action>
|
||||
<action>Repeat until validation passes</action>
|
||||
</check>
|
||||
<action>Once validation passes, confirm: "Diagram created at {{save_location}}. Open to view?"</action>
|
||||
</step>
|
||||
|
||||
<step n="10" goal="Validate Content">
|
||||
<invoke-task>Validate against {{validation}} using {{bmad_folder}}/core/tasks/validate-workflow.xml</invoke-task>
|
||||
</step>
|
||||
|
||||
</workflow>
|
||||
```
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
name: create-diagram
|
||||
description: "Create system architecture diagrams, ERDs, UML diagrams, or general technical diagrams in Excalidraw format"
|
||||
author: "BMad"
|
||||
|
||||
installed_path: "{project-root}/{bmad_folder}/bmm/workflows/frame-expert/create-diagram"
|
||||
shared_path: "{project-root}/{bmad_folder}/bmm/workflows/frame-expert/_shared"
|
||||
instructions: "{installed_path}/instructions.md"
|
||||
validation: "{installed_path}/checklist.md"
|
||||
|
||||
helpers: "{shared_path}/excalidraw-helpers.md"
|
||||
templates: "{shared_path}/excalidraw-templates.yaml"
|
||||
library: "{shared_path}/excalidraw-library.json"
|
||||
|
||||
variables:
|
||||
diagram_type: ""
|
||||
component_count: ""
|
||||
relationship_type: ""
|
||||
notation_standard: ""
|
||||
save_location: ""
|
||||
theme_choice: ""
|
||||
|
||||
default_output_file: "{project-root}/docs/diagrams/diagram-{timestamp}.excalidraw"
|
||||
|
||||
standalone: true
|
||||
web_bundle: false
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
# Create Flowchart - Validation Checklist
|
||||
|
||||
## Element Structure
|
||||
|
||||
- [ ] All shapes with labels have matching `groupIds`
|
||||
- [ ] All text elements have `containerId` pointing to parent shape
|
||||
- [ ] Text width calculated properly (no cutoff)
|
||||
- [ ] Text alignment set (`textAlign` + `verticalAlign`)
|
||||
|
||||
## Layout and Alignment
|
||||
|
||||
- [ ] All elements snapped to 20px grid
|
||||
- [ ] Consistent spacing between elements (60px minimum)
|
||||
- [ ] Vertical alignment maintained for flow direction
|
||||
- [ ] No overlapping elements
|
||||
|
||||
## Connections
|
||||
|
||||
- [ ] All arrows have `startBinding` and `endBinding`
|
||||
- [ ] `boundElements` array updated on connected shapes
|
||||
- [ ] Arrow types appropriate (straight for forward, elbow for backward/upward)
|
||||
- [ ] Gap set to 10 for all bindings
|
||||
|
||||
## Theme and Styling
|
||||
|
||||
- [ ] Theme colors applied consistently
|
||||
- [ ] All shapes use theme primary fill color
|
||||
- [ ] All borders use theme accent color
|
||||
- [ ] Text color is readable (#1e1e1e)
|
||||
|
||||
## Composition
|
||||
|
||||
- [ ] Element count under 50
|
||||
- [ ] Library components referenced where possible
|
||||
- [ ] No duplicate element definitions
|
||||
|
||||
## Output Quality
|
||||
|
||||
- [ ] No elements with `isDeleted: true`
|
||||
- [ ] JSON is valid
|
||||
- [ ] File saved to correct location
|
||||
|
||||
## Functional Requirements
|
||||
|
||||
- [ ] Start point clearly marked
|
||||
- [ ] End point clearly marked
|
||||
- [ ] All process steps labeled
|
||||
- [ ] Decision points use diamond shapes
|
||||
- [ ] Flow direction is clear and logical
|
||||
|
|
@ -0,0 +1,242 @@
|
|||
# Create Flowchart - Workflow Instructions
|
||||
|
||||
```xml
|
||||
<critical>The workflow execution engine is governed by: {project_root}/{bmad_folder}/core/tasks/workflow.xml</critical>
|
||||
<critical>You MUST have already loaded and processed: {installed_path}/workflow.yaml</critical>
|
||||
<critical>This workflow creates a flowchart visualization in Excalidraw format for processes, pipelines, or logic flows.</critical>
|
||||
|
||||
<workflow>
|
||||
|
||||
<step n="0" goal="Contextual Analysis (Smart Elicitation)">
|
||||
<critical>Before asking any questions, analyze what the user has already told you</critical>
|
||||
|
||||
<action>Review the user's initial request and conversation history</action>
|
||||
<action>Extract any mentioned: flowchart type, complexity, decision points, save location</action>
|
||||
|
||||
<check if="ALL requirements are clear from context">
|
||||
<action>Summarize your understanding</action>
|
||||
<action>Skip directly to Step 4 (Plan Flowchart Layout)</action>
|
||||
</check>
|
||||
|
||||
<check if="SOME requirements are clear">
|
||||
<action>Note what you already know</action>
|
||||
<action>Only ask about missing information in Step 1</action>
|
||||
</check>
|
||||
|
||||
<check if="requirements are unclear or minimal">
|
||||
<action>Proceed with full elicitation in Step 1</action>
|
||||
</check>
|
||||
</step>
|
||||
|
||||
<step n="1" goal="Gather Requirements" elicit="true">
|
||||
<action>Ask Question 1: "What type of process flow do you need to visualize?"</action>
|
||||
<action>Present numbered options:
|
||||
1. Business Process Flow - Document business workflows, approval processes, or operational procedures
|
||||
2. Algorithm/Logic Flow - Visualize code logic, decision trees, or computational processes
|
||||
3. User Journey Flow - Map user interactions, navigation paths, or experience flows
|
||||
4. Data Processing Pipeline - Show data transformation, ETL processes, or processing stages
|
||||
5. Other - Describe your specific flowchart needs
|
||||
</action>
|
||||
<action>WAIT for user selection (1-5)</action>
|
||||
<action>Store selection in {{flowchart_type}}</action>
|
||||
|
||||
<action>Ask Question 2: "How many main steps are in this flow?"</action>
|
||||
<action>Present numbered options:
|
||||
1. Simple (3-5 steps) - Quick process with few decision points
|
||||
2. Medium (6-10 steps) - Standard workflow with some branching
|
||||
3. Complex (11-20 steps) - Detailed process with multiple decision points
|
||||
4. Very Complex (20+ steps) - Comprehensive workflow requiring careful layout
|
||||
</action>
|
||||
<action>WAIT for user selection (1-4)</action>
|
||||
<action>Store selection in {{complexity}}</action>
|
||||
|
||||
<action>Ask Question 3: "Does your flow include decision points (yes/no branches)?"</action>
|
||||
<action>Present numbered options:
|
||||
1. No decisions - Linear flow from start to end
|
||||
2. Few decisions (1-2) - Simple branching with yes/no paths
|
||||
3. Multiple decisions (3-5) - Several conditional branches
|
||||
4. Complex decisions (6+) - Extensive branching logic
|
||||
</action>
|
||||
<action>WAIT for user selection (1-4)</action>
|
||||
<action>Store selection in {{decision_points}}</action>
|
||||
|
||||
<action>Ask Question 4: "Where should the flowchart be saved?"</action>
|
||||
<action>Present numbered options:
|
||||
1. Default location - docs/flowcharts/[auto-generated-name].excalidraw
|
||||
2. Custom path - Specify your own file path
|
||||
3. Project root - Save in main project directory
|
||||
4. Specific folder - Choose from existing folders
|
||||
</action>
|
||||
<action>WAIT for user selection (1-4)</action>
|
||||
<check if="selection is 2 or 4">
|
||||
<action>Ask for specific path</action>
|
||||
<action>WAIT for user input</action>
|
||||
</check>
|
||||
<action>Store final path in {{save_location}}</action>
|
||||
</step>
|
||||
|
||||
<step n="2" goal="Check for Existing Theme" elicit="true">
|
||||
<action>Check if theme.json exists at output location</action>
|
||||
<check if="theme.json exists">
|
||||
<action>Ask: "Found existing theme. Use it? (yes/no)"</action>
|
||||
<action>WAIT for user response</action>
|
||||
<check if="user says yes">
|
||||
<action>Load and use existing theme</action>
|
||||
<action>Skip to Step 4</action>
|
||||
</check>
|
||||
<check if="user says no">
|
||||
<action>Proceed to Step 3</action>
|
||||
</check>
|
||||
</check>
|
||||
<check if="theme.json does not exist">
|
||||
<action>Proceed to Step 3</action>
|
||||
</check>
|
||||
</step>
|
||||
|
||||
<step n="3" goal="Create Theme" elicit="true">
|
||||
<action>Ask: "Let's create a theme for your flowchart. Choose a color scheme:"</action>
|
||||
<action>Present numbered options:
|
||||
1. Professional Blue
|
||||
- Primary Fill: #e3f2fd (light blue)
|
||||
- Accent/Border: #1976d2 (blue)
|
||||
- Decision: #fff3e0 (light orange)
|
||||
- Text: #1e1e1e (dark gray)
|
||||
|
||||
2. Success Green
|
||||
- Primary Fill: #e8f5e9 (light green)
|
||||
- Accent/Border: #388e3c (green)
|
||||
- Decision: #fff9c4 (light yellow)
|
||||
- Text: #1e1e1e (dark gray)
|
||||
|
||||
3. Neutral Gray
|
||||
- Primary Fill: #f5f5f5 (light gray)
|
||||
- Accent/Border: #616161 (gray)
|
||||
- Decision: #e0e0e0 (medium gray)
|
||||
- Text: #1e1e1e (dark gray)
|
||||
|
||||
4. Warm Orange
|
||||
- Primary Fill: #fff3e0 (light orange)
|
||||
- Accent/Border: #f57c00 (orange)
|
||||
- Decision: #ffe0b2 (peach)
|
||||
- Text: #1e1e1e (dark gray)
|
||||
|
||||
5. Custom Colors - Define your own color palette
|
||||
</action>
|
||||
<action>WAIT for user selection (1-5)</action>
|
||||
<action>Store selection in {{theme_choice}}</action>
|
||||
|
||||
<check if="selection is 5 (Custom)">
|
||||
<action>Ask: "Primary fill color (hex code)?"</action>
|
||||
<action>WAIT for user input</action>
|
||||
<action>Store in {{custom_colors.primary_fill}}</action>
|
||||
<action>Ask: "Accent/border color (hex code)?"</action>
|
||||
<action>WAIT for user input</action>
|
||||
<action>Store in {{custom_colors.accent}}</action>
|
||||
<action>Ask: "Decision color (hex code)?"</action>
|
||||
<action>WAIT for user input</action>
|
||||
<action>Store in {{custom_colors.decision}}</action>
|
||||
</check>
|
||||
|
||||
<action>Create theme.json with selected colors</action>
|
||||
<action>Show theme preview with all colors</action>
|
||||
<action>Ask: "Theme looks good?"</action>
|
||||
<action>Present numbered options:
|
||||
1. Yes, use this theme - Proceed with theme
|
||||
2. No, adjust colors - Modify color selections
|
||||
3. Start over - Choose different preset
|
||||
</action>
|
||||
<action>WAIT for selection (1-3)</action>
|
||||
<check if="selection is 2 or 3">
|
||||
<action>Repeat Step 3</action>
|
||||
</check>
|
||||
</step>
|
||||
|
||||
<step n="4" goal="Plan Flowchart Layout">
|
||||
<action>List all steps and decision points based on gathered requirements</action>
|
||||
<action>Show user the planned structure</action>
|
||||
<action>Ask: "Structure looks correct? (yes/no)"</action>
|
||||
<action>WAIT for user response</action>
|
||||
<check if="user says no">
|
||||
<action>Adjust structure based on feedback</action>
|
||||
<action>Repeat this step</action>
|
||||
</check>
|
||||
</step>
|
||||
|
||||
<step n="5" goal="Load Template and Resources">
|
||||
<action>Load {{templates}} file</action>
|
||||
<action>Extract `flowchart` section from YAML</action>
|
||||
<action>Load {{library}} file</action>
|
||||
<action>Load theme.json and merge colors with template</action>
|
||||
<action>Load {{helpers}} for element creation guidelines</action>
|
||||
</step>
|
||||
|
||||
<step n="6" goal="Build Flowchart Elements">
|
||||
<critical>Follow guidelines from {{helpers}} for proper element creation</critical>
|
||||
|
||||
<action>Build ONE section at a time following these rules:</action>
|
||||
|
||||
<substep>For Each Shape with Label:
|
||||
1. Generate unique IDs (shape-id, text-id, group-id)
|
||||
2. Create shape with groupIds: [group-id]
|
||||
3. Calculate text width: (text.length × fontSize × 0.6) + 20, round to nearest 10
|
||||
4. Create text element with:
|
||||
- containerId: shape-id
|
||||
- groupIds: [group-id] (SAME as shape)
|
||||
- textAlign: "center"
|
||||
- verticalAlign: "middle"
|
||||
- width: calculated width
|
||||
5. Add boundElements to shape referencing text
|
||||
</substep>
|
||||
|
||||
<substep>For Each Arrow:
|
||||
1. Determine arrow type needed:
|
||||
- Straight: For forward flow (left-to-right, top-to-bottom)
|
||||
- Elbow: For upward flow, backward flow, or complex routing
|
||||
2. Create arrow with startBinding and endBinding
|
||||
3. Set startBinding.elementId to source shape ID
|
||||
4. Set endBinding.elementId to target shape ID
|
||||
5. Set gap: 10 for both bindings
|
||||
6. If elbow arrow, add intermediate points for direction changes
|
||||
7. Update boundElements on both connected shapes
|
||||
</substep>
|
||||
|
||||
<substep>Alignment:
|
||||
- Snap all x, y to 20px grid
|
||||
- Align shapes vertically (same x for vertical flow)
|
||||
- Space elements: 60px between shapes
|
||||
</substep>
|
||||
|
||||
<substep>Build Order:
|
||||
1. Start point (circle) with label
|
||||
2. Each process step (rectangle) with label
|
||||
3. Each decision point (diamond) with label
|
||||
4. End point (circle) with label
|
||||
5. Connect all with bound arrows
|
||||
</substep>
|
||||
</step>
|
||||
|
||||
<step n="7" goal="Optimize and Save">
|
||||
<action>Strip unused elements and elements with isDeleted: true</action>
|
||||
<action>Save to {{save_location}}</action>
|
||||
</step>
|
||||
|
||||
<step n="8" goal="Validate JSON Syntax">
|
||||
<critical>NEVER delete the file if validation fails - always fix syntax errors</critical>
|
||||
<action>Run: node -e "JSON.parse(require('fs').readFileSync('{{save_location}}', 'utf8')); console.log('✓ Valid JSON')"</action>
|
||||
<check if="validation fails (exit code 1)">
|
||||
<action>Read the error message carefully - it shows the syntax error and position</action>
|
||||
<action>Open the file and navigate to the error location</action>
|
||||
<action>Fix the syntax error (add missing comma, bracket, or quote as indicated)</action>
|
||||
<action>Save the file</action>
|
||||
<action>Re-run validation with the same command</action>
|
||||
<action>Repeat until validation passes</action>
|
||||
</check>
|
||||
<action>Once validation passes, confirm with user: "Flowchart created at {{save_location}}. Open to view?"</action>
|
||||
</step>
|
||||
|
||||
<step n="9" goal="Validate Content">
|
||||
<invoke-task>Validate against checklist at {{validation}} using {{bmad_folder}}/core/tasks/validate-workflow.xml</invoke-task>
|
||||
</step>
|
||||
|
||||
</workflow>
|
||||
```
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
name: create-flowchart
|
||||
description: "Create a flowchart visualization in Excalidraw format for processes, pipelines, or logic flows"
|
||||
author: "BMad"
|
||||
|
||||
# Workflow components
|
||||
installed_path: "{project-root}/{bmad_folder}/bmm/workflows/frame-expert/create-flowchart"
|
||||
shared_path: "{project-root}/{bmad_folder}/bmm/workflows/frame-expert/_shared"
|
||||
instructions: "{installed_path}/instructions.md"
|
||||
validation: "{installed_path}/checklist.md"
|
||||
|
||||
# Shared resources
|
||||
helpers: "{shared_path}/excalidraw-helpers.md"
|
||||
templates: "{shared_path}/excalidraw-templates.yaml"
|
||||
library: "{shared_path}/excalidraw-library.json"
|
||||
|
||||
# Variables
|
||||
variables:
|
||||
flowchart_type: "" # Will be elicited
|
||||
complexity: "" # Will be elicited
|
||||
decision_points: "" # Will be elicited
|
||||
save_location: "" # Will be elicited
|
||||
theme_choice: "" # Will be elicited
|
||||
custom_colors: {} # For custom theme
|
||||
|
||||
default_output_file: "{project-root}/docs/flowcharts/flowchart-{timestamp}.excalidraw"
|
||||
|
||||
standalone: true
|
||||
web_bundle: false
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
# Create Wireframe - Validation Checklist
|
||||
|
||||
## Layout Structure
|
||||
|
||||
- [ ] Screen dimensions appropriate for device type
|
||||
- [ ] Grid alignment (20px) maintained
|
||||
- [ ] Consistent spacing between UI elements
|
||||
- [ ] Proper hierarchy (header, content, footer)
|
||||
|
||||
## UI Elements
|
||||
|
||||
- [ ] All interactive elements clearly marked
|
||||
- [ ] Buttons, inputs, and controls properly sized
|
||||
- [ ] Text labels readable and appropriately sized
|
||||
- [ ] Navigation elements clearly indicated
|
||||
|
||||
## Fidelity
|
||||
|
||||
- [ ] Matches requested fidelity level (low/medium/high)
|
||||
- [ ] Appropriate level of detail
|
||||
- [ ] Placeholder content used where needed
|
||||
- [ ] No unnecessary decoration for low-fidelity
|
||||
|
||||
## Annotations
|
||||
|
||||
- [ ] Key interactions annotated
|
||||
- [ ] Flow indicators present if multi-screen
|
||||
- [ ] Important notes included
|
||||
- [ ] Element purposes clear
|
||||
|
||||
## Technical Quality
|
||||
|
||||
- [ ] All elements properly grouped
|
||||
- [ ] Text elements have containerId
|
||||
- [ ] Snapped to grid
|
||||
- [ ] No elements with `isDeleted: true`
|
||||
- [ ] JSON is valid
|
||||
- [ ] File saved to correct location
|
||||
|
|
@ -0,0 +1,133 @@
|
|||
# Create Wireframe - Workflow Instructions
|
||||
|
||||
```xml
|
||||
<critical>The workflow execution engine is governed by: {project_root}/{bmad_folder}/core/tasks/workflow.xml</critical>
|
||||
<critical>You MUST have already loaded and processed: {installed_path}/workflow.yaml</critical>
|
||||
<critical>This workflow creates website or app wireframes in Excalidraw format.</critical>
|
||||
|
||||
<workflow>
|
||||
|
||||
<step n="0" goal="Contextual Analysis">
|
||||
<action>Review user's request and extract: wireframe type, fidelity level, screen count, device type, save location</action>
|
||||
<check if="ALL requirements clear"><action>Skip to Step 5</action></check>
|
||||
</step>
|
||||
|
||||
<step n="1" goal="Identify Wireframe Type" elicit="true">
|
||||
<action>Ask: "What type of wireframe do you need?"</action>
|
||||
<action>Present options:
|
||||
1. Website (Desktop)
|
||||
2. Mobile App (iOS/Android)
|
||||
3. Web App (Responsive)
|
||||
4. Tablet App
|
||||
5. Multi-platform
|
||||
</action>
|
||||
<action>WAIT for selection, store in {{wireframe_type}}</action>
|
||||
</step>
|
||||
|
||||
<step n="2" goal="Gather Requirements" elicit="true">
|
||||
<action>Ask fidelity level (Low/Medium/High)</action>
|
||||
<action>Ask screen count (Single/Few 2-3/Multiple 4-6/Many 7+)</action>
|
||||
<action>Ask device dimensions or use standard</action>
|
||||
<action>Ask save location</action>
|
||||
</step>
|
||||
|
||||
<step n="3" goal="Check Theme" elicit="true">
|
||||
<action>Check for existing theme.json, ask to use if exists</action>
|
||||
</step>
|
||||
|
||||
<step n="4" goal="Create Theme" elicit="true">
|
||||
<action>Ask: "Choose a wireframe style:"</action>
|
||||
<action>Present numbered options:
|
||||
1. Classic Wireframe
|
||||
- Background: #ffffff (white)
|
||||
- Container: #f5f5f5 (light gray)
|
||||
- Border: #9e9e9e (gray)
|
||||
- Text: #424242 (dark gray)
|
||||
|
||||
2. High Contrast
|
||||
- Background: #ffffff (white)
|
||||
- Container: #eeeeee (light gray)
|
||||
- Border: #212121 (black)
|
||||
- Text: #000000 (black)
|
||||
|
||||
3. Blueprint Style
|
||||
- Background: #1a237e (dark blue)
|
||||
- Container: #3949ab (blue)
|
||||
- Border: #7986cb (light blue)
|
||||
- Text: #ffffff (white)
|
||||
|
||||
4. Custom - Define your own colors
|
||||
</action>
|
||||
<action>WAIT for selection</action>
|
||||
<action>Create theme.json based on selection</action>
|
||||
<action>Confirm with user</action>
|
||||
</step>
|
||||
|
||||
<step n="5" goal="Plan Wireframe Structure">
|
||||
<action>List all screens and their purposes</action>
|
||||
<action>Map navigation flow between screens</action>
|
||||
<action>Identify key UI elements for each screen</action>
|
||||
<action>Show planned structure, confirm with user</action>
|
||||
</step>
|
||||
|
||||
<step n="6" goal="Load Resources">
|
||||
<action>Load {{templates}} and extract `wireframe` section</action>
|
||||
<action>Load {{library}}</action>
|
||||
<action>Load theme.json</action>
|
||||
<action>Load {{helpers}}</action>
|
||||
</step>
|
||||
|
||||
<step n="7" goal="Build Wireframe Elements">
|
||||
<critical>Follow {{helpers}} for proper element creation</critical>
|
||||
|
||||
<substep>For Each Screen:
|
||||
- Create container/frame
|
||||
- Add header section
|
||||
- Add content areas
|
||||
- Add navigation elements
|
||||
- Add interactive elements (buttons, inputs)
|
||||
- Add labels and annotations
|
||||
</substep>
|
||||
|
||||
<substep>Build Order:
|
||||
1. Screen containers
|
||||
2. Layout sections (header, content, footer)
|
||||
3. Navigation elements
|
||||
4. Content blocks
|
||||
5. Interactive elements
|
||||
6. Labels and annotations
|
||||
7. Flow indicators (if multi-screen)
|
||||
</substep>
|
||||
|
||||
<substep>Fidelity Guidelines:
|
||||
- Low: Basic shapes, minimal detail, placeholder text
|
||||
- Medium: More defined elements, some styling, representative content
|
||||
- High: Detailed elements, realistic sizing, actual content examples
|
||||
</substep>
|
||||
</step>
|
||||
|
||||
<step n="8" goal="Optimize and Save">
|
||||
<action>Strip unused elements and elements with isDeleted: true</action>
|
||||
<action>Save to {{save_location}}</action>
|
||||
</step>
|
||||
|
||||
<step n="9" goal="Validate JSON Syntax">
|
||||
<critical>NEVER delete the file if validation fails - always fix syntax errors</critical>
|
||||
<action>Run: node -e "JSON.parse(require('fs').readFileSync('{{save_location}}', 'utf8')); console.log('✓ Valid JSON')"</action>
|
||||
<check if="validation fails (exit code 1)">
|
||||
<action>Read the error message carefully - it shows the syntax error and position</action>
|
||||
<action>Open the file and navigate to the error location</action>
|
||||
<action>Fix the syntax error (add missing comma, bracket, or quote as indicated)</action>
|
||||
<action>Save the file</action>
|
||||
<action>Re-run validation with the same command</action>
|
||||
<action>Repeat until validation passes</action>
|
||||
</check>
|
||||
<action>Once validation passes, confirm with user</action>
|
||||
</step>
|
||||
|
||||
<step n="10" goal="Validate Content">
|
||||
<invoke-task>Validate against {{validation}}</invoke-task>
|
||||
</step>
|
||||
|
||||
</workflow>
|
||||
```
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
name: create-wireframe
|
||||
description: "Create website or app wireframes in Excalidraw format"
|
||||
author: "BMad"
|
||||
|
||||
installed_path: "{project-root}/{bmad_folder}/bmm/workflows/frame-expert/create-wireframe"
|
||||
shared_path: "{project-root}/{bmad_folder}/bmm/workflows/frame-expert/_shared"
|
||||
instructions: "{installed_path}/instructions.md"
|
||||
validation: "{installed_path}/checklist.md"
|
||||
|
||||
helpers: "{shared_path}/excalidraw-helpers.md"
|
||||
templates: "{shared_path}/excalidraw-templates.yaml"
|
||||
library: "{shared_path}/excalidraw-library.json"
|
||||
|
||||
variables:
|
||||
wireframe_type: ""
|
||||
fidelity_level: ""
|
||||
screen_count: ""
|
||||
device_type: ""
|
||||
save_location: ""
|
||||
|
||||
default_output_file: "{project-root}/docs/wireframes/wireframe-{timestamp}.excalidraw"
|
||||
|
||||
standalone: true
|
||||
web_bundle: false
|
||||
Loading…
Reference in New Issue