From 8719d828d06f0d9b8bba7cb43fd0afec412bb623 Mon Sep 17 00:00:00 2001 From: Brian Madison Date: Sun, 25 Jan 2026 23:49:15 -0600 Subject: [PATCH] fix width and responsiveness of diagram --- docs/reference/workflow-map.md | 2 +- website/public/workflow-map-diagram.html | 1211 ++++++---------------- website/src/styles/custom.css | 10 +- 3 files changed, 303 insertions(+), 920 deletions(-) diff --git a/docs/reference/workflow-map.md b/docs/reference/workflow-map.md index 0d0ff488..22b97299 100644 --- a/docs/reference/workflow-map.md +++ b/docs/reference/workflow-map.md @@ -11,7 +11,7 @@ If at anytime you are unsure what to do, the `/bmad-help` command will help you Final important note: Every workflow below can be run directly with your tool of choice via slash command or by loading an agent first and using the entry from the agents menu. - + *[Interactive diagram - hover over outputs to see artifact flows]* diff --git a/website/public/workflow-map-diagram.html b/website/public/workflow-map-diagram.html index dbc390d6..2bcc4c44 100644 --- a/website/public/workflow-map-diagram.html +++ b/website/public/workflow-map-diagram.html @@ -4,289 +4,91 @@ BMad Method Workflow Map - -
- -
-
- - - - - - Workflow Map V6 -
-

BMad Method

-

Context engineering and planning for AI-powered software development

-
+
+
⚡ Workflow Map V6
+

BMad Method

+

Context engineering for AI-powered development

+
- -
-
Artifact Flow → (arrows show which documents feed into the next workflow)
-
- product-brief.md → PRD.md → architecture.md → Stories - story file → dev → code-review - tech-spec.md → quick-dev +
→ arrows show artifact flow between workflows
+ +
+ +
+
+
1
+
Analysis
+ Optional
+
+
+
+ brainstorm + opt +
+
+
M
Mary
+ brainstorming-report.md +
+
+
+
+ research + opt +
+
+
M
Mary
+ findings +
+
+
+
+ create-product-brief +
+
+
M
Mary
+ product-brief.md → +
+
+
+
→
- -
- -
-
-
-
1
- Optional + +
+
+
2
+
Planning
+
+
+
+
+ create-prd +
+
+
J
John
+ PRD.md →
-
Analysis
-
- Explore the problem space and validate ideas. -
-
-
-
- brainstorm - Opt -
-

Brainstorm project ideas

-
-
-
M
- Mary -
-
brainstorming-report.md
-
+
Has UI?
+
+
+ create-ux-design + if yes
-
-
- research - Opt -
-

Validate assumptions

-
-
-
M
- Mary -
-
Research findings
-
-
-
-
- create-product-brief -
-

Capture strategic vision

-
-
-
M
- Mary -
-
product-brief.md →
-
-
-
-
- - -
-
product-brief.md
-
→
-
- - -
-
-
-
2
-
-
Planning
-
-
- Define requirements and user experience. -
-
-
-
- create-prd -
-

Define requirements (FRs/NFRs)

-
-
-
J
- John -
-
PRD.md →
-
-
-
Has UI?
-
-
- create-ux-design - If Yes -
-

Design user experience

-
-
-
S
- Sally -
-
ux-spec.md →
-
-
-
-
- - -
-
PRD + UX
-
→
-
- - -
-
-
-
3
-
-
Solutioning
-
-
- Design architecture and break into stories. -
-
-
-
- create-architecture -
-

Make technical decisions explicit

-
-
-
W
- Winston -
-
architecture.md →
-
-
-
-
- create-epics-and-stories -
-

Break into implementable work

-
-
-
J
- John -
-
Epic files →
-
-
-
-
- check-implementation-readiness -
-

Gate check before implementation

-
-
-
J
- John -
-
PASS/CONCERNS/FAIL
-
-
-
-
- - -
-
arch + epics
-
→
-
- - -
-
-
-
4
-
-
Implementation
-
-
- Build it, one story at a time. -
-
-
-
- sprint-planning -
-

Initialize tracking

-
-
-
B
- Bob -
-
sprint-status.yaml →
-
-
-
-
- create-story -
-

Prepare story for implementation

-
-
-
B
- Bob -
-
story-[slug].md →
-
-
-
-
- dev-story -
-

Implement the story

-
-
-
A
- Amelia -
-
code →
-
-
-
-
- code-review -
-

Validate implementation

-
-
-
A
- Amelia -
-
Approved
-
-
-
-
- correct-course - Ad-Hoc -
-

Handle mid-sprint changes

-
-
-
J
- John -
-
Updated plan
-
-
-
-
- retrospective - Per Epic -
-

Review lessons learned

-
-
-
B
- Bob -
-
Lessons
-
+
+
S
Sally
+ ux-spec.md →
+
→
- -
-
-
⚡
-
-

Quick Flow (Parallel Track)

-

For small, well-understood changes — skip phases 1-3

-
+ +
+
+
3
+
Solutioning
-
-
-
-
B
- Barry +
+
+
+ create-architecture
- quick-spec -
Define an ad-hoc change
-
tech-spec.md
-
-
→
-
-
-
B
- Barry +
+
W
Winston
+ architecture.md → +
+
+
+
+ create-epics-and-stories +
+
+
J
John
+ epics.md → +
+
+
+
+ check-implementation-readiness +
+
+
J
John
+ gate check
- quick-dev -
Implement from spec
-
Working code + tests
+
→
- -
-
-
📚
-

Context Management

+ +
+
+
4
+
Implementation
-

- Each document becomes context for the next phase. PRD → Architecture, Architecture → Dev, Story → Implementation. - Without this structure, agents make inconsistent decisions. -

-
- Brownfield: Use document-project to create project-context.md before Phase 4. - (Mary / Paige) -
-

Context loaded per workflow:

-
-
create-story epics, PRD, arch, UX
-
dev-story story file
-
code-review arch, story
-
quick-dev tech-spec
-
-
- - -
-
-
- Phase 1: Analysis -
-
-
- Phase 2: Planning -
-
-
- Phase 3: Solutioning -
-
-
- Phase 4: Implementation -
-
- → = Artifact flows to next phase -
-
- - -
-
-
M
- Mary -
-
-
J
- John -
-
-
S
- Sally -
-
-
W
- Winston -
-
-
B
- Bob -
-
-
A
- Amelia -
-
-
B
- Barry +
+
+
+ sprint-planning +
+
+
B
Bob
+ sprint-status.yaml → +
+
+
+
+ create-story +
+
+
B
Bob
+ story-[slug].md → +
+
+
+
+ dev-story +
+
+
A
Amelia
+ code → +
+
+
+
+ code-review +
+
+
A
Amelia
+ approve +
+
+
+
+ correct-course + ad-hoc +
+
+
J
John
+ updated plan +
+
+
+
+ retrospective + per epic +
+
+
B
Bob
+ lessons +
+
+ +
+
+ ⚡ +
+

Quick Flow (Parallel Track)

+ For small, well-understood changes — skip phases 1-3 +
+
+
+
+
B
Barry
+ quick-spec +
→ tech-spec.md
+
+ → +
+
B
Barry
+ quick-dev +
→ working code
+
+
+
+ +
+
📚 Context Flow
+

Each document becomes context for the next phase.

+
+ create-story loads epics, PRD, architecture, UX + dev-story loads story file + code-review loads architecture, story + quick-dev loads tech-spec +
+
+ +
+
Analysis
+
Planning
+
Solutioning
+
Implementation
+
Quick Flow
+
diff --git a/website/src/styles/custom.css b/website/src/styles/custom.css index 1dd65715..4ad9cb2d 100644 --- a/website/src/styles/custom.css +++ b/website/src/styles/custom.css @@ -16,6 +16,9 @@ --ai-banner-height: 2.75rem; --sl-nav-height: 6.25rem; /* Base nav height (~3.5rem) + banner height (2.75rem) */ + /* Full-width content - override Starlight's default 45rem/67.5rem */ + --sl-content-width: 100%; + /* Primary accent colors - purple to match Docusaurus */ --sl-color-accent-low: #e0e0ff; --sl-color-accent: #8C8CFF; @@ -45,6 +48,9 @@ COLOR PALETTE - Dark Mode (Primary Focus) ============================================ */ :root[data-theme='dark'] { + /* Full-width content - override Starlight's default */ + --sl-content-width: 100%; + /* Primary accent colors - purple to match Docusaurus */ --sl-color-accent-low: #2a2a5a; --sl-color-accent: #8C8CFF; @@ -174,10 +180,10 @@ } /* ============================================ - LAYOUT - Fixed width at large viewport + LAYOUT - Full width content ============================================ */ .content-panel { - max-width: 1400px; + width: 100%; margin: 0 auto; }