skills.rest
awieczork
awieczorkCOMMUNITY
Explore all skills by this author →
GitHub

mermaid-diagramming

Generate B4 flowchart diagrams for plan visualization with teal monochrome styling.

Updated Feb 8, 2026
Search Tags:#workflow#planning#mermaid#flowchart#diagramming#visualization
One-click install
npx skills add https://github.com/awieczork/theme-framework --skill mermaid-diagramming-awieczork
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mermaid-diagramming
Source: https://github.com/awieczork/theme-framework/tree/main/.github/skills/mermaid-diagramming
Command: npx skills add https://github.com/awieczork/theme-framework --skill mermaid-diagramming-awieczork

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill transforms complex plan structures into clear, visual flowcharts, making it easier to understand workflows, dependencies, and parallel processes.

Core Features & Use Cases

  • Plan Visualization: Generates diagrams from planner outputs using the B4 flowchart pattern.
  • Customizable Flowcharts: Creates teal monochrome diagrams with specific node shapes and edge encodings for parallelism, delegation, and task types.
  • Use Case: After a plan is generated, use this Skill to create a visual representation of the workflow, showing how tasks are chained, which ones run in parallel, and where inspection gates occur.

Quick Start

Render a plan diagram for the attached plan template.

Frequently Asked Questions about mermaid-diagramming

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I visualize a workflow plan as a flowchart?▼

Visualizing a workflow plan as a flowchart requires transforming complex plan structures into clear diagrams using the B4 flowchart pattern. This approach clarifies task dependencies, parallel processes, and agent delegation paths.

What is the B4 flowchart pattern for diagramming?▼

The B4 flowchart pattern is a diagramming method that uses specific node shapes, edge types, and a teal monochrome color palette to encode parallelism, task delegation, and task types within a workflow.

How do I generate a diagram showing task dependencies and parallel processes?▼

Generating a diagram showing task dependencies and parallel processes involves applying the B4 flowchart pattern to planner outputs, utilizing specific edge encodings to distinguish parallel tasks and chained dependencies.

Can I customize the node shapes and colors in my workflow visualization?▼

Customizing workflow visualizations involves applying specific node shapes and a teal monochrome color palette, ensuring clarity and consistency when representing different task types and inspection gates within the flowchart.

How do I represent inspection gates in a flowchart?▼

Representing inspection gates in a flowchart involves using specific node shapes and edge encodings defined by the B4 flowchart pattern, clearly marking where inspection gates occur within the workflow.

Related Skills

Explore More Software Engineering Skills→
tomlmtomlm

speckit-tasks

Generate a dependency-ordered tasks.md from design artifacts for spec-kit projects.

Community
Advanced
Binh230199Binh230199
1

dependency-mapping

Map task dependencies into a directed acyclic graph with Mermaid flowchart output.

Community
Intermediate
gesmith0606gesmith0606

fireworks-tech-graph

Generate SVG architecture, data-flow, flowchart, and concept map diagrams from natural language descriptions.

Community
Advanced
GuidoBergmanGuidoBergman

create-excalidraw-flowchart

Generate Excalidraw flowcharts from workflow configuration files.

Community
Intermediate