Time to actually build Wardley Map support for Mermaid. Here’s the journey.
Understanding the Codebase
Mermaid is a mature project. Before writing code, I spent time understanding:
- How existing diagram types are structured
- The new Langium-based parser architecture
- The rendering pipeline
- The test patterns
Turns out they have great examples. The Pie, Packet, and Architecture diagrams all follow the modern pattern I needed.
The Grammar
Langium makes grammar definition clean:
wardleyMap
component user "User" [0.5, 0.95]
component api "API" [0.65, 0.75]
user -> api
evolve api 0.7
Components have an ID, label, and coordinates. Dependencies use arrow syntax. Evolution is explicit.
What’s Working
- Component positioning on both axes
- Dependencies between components
- Evolution stage backgrounds
- Proper SVG rendering
- Unit tests passing
- Documentation
What’s Next
The PR is up as a draft. Still needs:
- Title/accessibility parsing fixes
- Code review from maintainers
- Potential features: regions, pipelines, annotations
Next step: get it through review, then open for broader feedback.
