|
| 1 | +--- |
| 2 | +name: mermaid-workflow-diagrams |
| 3 | +description: Use when adding, revising, or reviewing visual explanations in chapters, appendices, landing pages, or script documentation for this Just the Docs site. Includes Mermaid diagram selection guidance and when to choose a non-Mermaid format instead. |
| 4 | +--- |
| 5 | + |
| 6 | +# Mermaid Workflow Diagrams |
| 7 | + |
| 8 | +Visuals should make the guide easier to understand, not busier. Start by deciding whether a visual is needed at all, then choose the simplest format that explains the relationship clearly. |
| 9 | + |
| 10 | +This site currently pins Mermaid to `9.1.3` in `_config.yml`. Treat diagram types and syntax introduced after that version as "verify first" options. Do not use newer Mermaid features just because they appear in the current Mermaid documentation unless the site Mermaid version is intentionally upgraded and the build/preview is checked. |
| 11 | + |
| 12 | +## Decision Workflow |
| 13 | + |
| 14 | +1. Identify the teaching job of the visual. |
| 15 | + - Process: "What happens next?" |
| 16 | + - Decision: "Which path should I take?" |
| 17 | + - Interaction: "Who talks to whom, and in what order?" |
| 18 | + - State: "What modes can this object or workflow be in?" |
| 19 | + - Structure: "How are things related?" |
| 20 | + - Time: "When do events happen?" |
| 21 | + - Evidence/data: "What measured quantity should be compared?" |
| 22 | +2. Decide whether Mermaid is the right medium. |
| 23 | +3. Choose the diagram type from the repository below. |
| 24 | +4. Draft a small version first. |
| 25 | +5. Check readability in the Just the Docs content column and on mobile. |
| 26 | +6. Add accessibility metadata. |
| 27 | +7. Build the site and preview layout-sensitive changes. |
| 28 | + |
| 29 | +## When Not To Use Mermaid |
| 30 | + |
| 31 | +Choose a non-Mermaid format when it is clearer or more reliable: |
| 32 | + |
| 33 | +| Need | Better choice | Why | |
| 34 | +| --- | --- | --- | |
| 35 | +| Fewer than 4 linear steps | Ordered list | Faster to scan than a diagram. | |
| 36 | +| Comparison of options, pros/cons, or rules | Markdown table | Tables support dense text and side-by-side comparison better. | |
| 37 | +| Copy/paste instructions or prompts | Fenced code block | Preserves exact Markdown, prompts, and indentation. | |
| 38 | +| Detailed quantitative data | R/ggplot, Plotly, CSV-backed table, or static chart image | Mermaid charts are not a statistical graphics system. | |
| 39 | +| Screens, UI state, or rendered output | Screenshot or generated image | Shows the real artifact instead of a symbolic approximation. | |
| 40 | +| Publication-quality figure with exact layout | SVG, image, or design tool export | Mermaid layout is algorithmic and hard to fine tune. | |
| 41 | +| Large architecture with many systems and dependencies | C4/Structurizr, Graphviz/DOT, D2, or a hand-authored architecture diagram | Better control and clearer large-system layout. | |
| 42 | +| Conceptual taxonomy with long explanations | Headings, nested list, or table | Text hierarchy is more accessible and easier to maintain. | |
| 43 | +| Decorative visual break | No visual | Decoration adds maintenance cost without teaching value. | |
| 44 | + |
| 45 | +## Diagram Repository |
| 46 | + |
| 47 | +Use this table before writing Mermaid. "Good fit" means the diagram type is usually useful for this guide. "Use sparingly" means it can help in narrow cases but is often worse than prose or a table. "Verify first" means confirm support under the pinned Mermaid version or upgrade Mermaid intentionally before using it. |
| 48 | + |
| 49 | +| Diagram type | Syntax start | Fit for this guide | Use when | Avoid when | |
| 50 | +| --- | --- | --- | --- | --- | |
| 51 | +| Flowchart | `flowchart TB` or `flowchart LR` | Good fit | Workflows, branching decisions, loops, review/refinement cycles, inputs leading to outputs. | The point is an interaction between actors, a data schema, or a time schedule. | |
| 52 | +| Sequence diagram | `sequenceDiagram` | Good fit | Prompt/tool/user interactions, request-response flows, review handoffs, API-like exchanges. | There is only one actor or the ordering is not interaction-driven. | |
| 53 | +| State diagram | `stateDiagram-v2` | Good fit | Status transitions such as draft -> reviewed -> revised -> accepted, or code/test states. | You are showing tasks rather than states. Use a flowchart instead. | |
| 54 | +| Entity relationship diagram | `erDiagram` | Good fit | Data tables, simulated EHR entities, joins, keys, derived datasets. | You need workflow or causal logic. | |
| 55 | +| Class diagram | `classDiagram` | Use sparingly | Object models, package/module responsibilities, typed relationships. | The guide is explaining human workflow or data tables. | |
| 56 | +| User journey | `journey` | Use sparingly | Researcher experience across planning, coding, review, documentation, and friction points. | The content is not persona-centered. | |
| 57 | +| Gantt | `gantt` | Use sparingly | Project schedules, manuscript timelines, release plans. | You only need a checklist or dependency workflow. | |
| 58 | +| Pie chart | `pie` | Use sparingly | Simple proportions that sum to a meaningful whole. | Comparing more than 3-5 categories, showing change over time, or presenting precise data. Prefer a table or real chart. | |
| 59 | +| Git graph | `gitGraph` | Use sparingly | Branch, commit, PR, review, and release examples. | You are explaining conceptual iteration rather than actual git history. | |
| 60 | +| Requirement diagram | `requirementDiagram` | Use sparingly | Trace success criteria to risks, tests, and acceptance checks. | The page is not about requirements or validation. | |
| 61 | +| C4 diagram | `C4Context`, `C4Container`, etc. | Verify first | Software architecture context with people, systems, containers, and dependencies. | You need precise, durable architecture docs. Consider Structurizr or C4-PlantUML for larger systems. | |
| 62 | +| Mindmap | `mindmap` | Verify first | Brainstorming, topic breakdowns, compact conceptual hierarchy. | The hierarchy is long, text-heavy, or needs stable reading order. | |
| 63 | +| Timeline | `timeline` | Verify first | Chronological history, release milestones, or project phases. | You are showing a process that can loop or branch. | |
| 64 | +| Quadrant chart | `quadrantChart` | Verify first | Two-axis prioritization such as impact vs effort or risk vs confidence. | Axes are subjective or the categories need explanation. Prefer a table. | |
| 65 | +| Sankey | `sankey-beta` | Verify first | Flow quantities between stages, if real quantities exist. | You do not have measured weights. Do not fake quantitative flow. | |
| 66 | +| XY chart | `xychart-beta` | Verify first | Simple bar/line examples where exact analytical plotting is not needed. | Research data, statistical graphics, uncertainty, or anything requiring reproducible analysis. Use R. | |
| 67 | +| Block diagram | `block-beta` | Verify first | Spatial grouping of components or conceptual blocks. | A flowchart or table can express the relationship. | |
| 68 | +| Architecture diagram | `architecture-beta` | Verify first | Lightweight architecture sketches if supported by the active Mermaid version. | Stable architecture documentation. Prefer C4/Structurizr/Graphviz. | |
| 69 | +| Kanban | `kanban` | Verify first | Work-in-progress board examples. | The page is about process logic, not current work status. | |
| 70 | +| Radar | `radar-beta` | Verify first | Small multi-factor profiles, if the axes are honest and comparable. | Evidence strength or model/tool rankings without rigorous scoring. | |
| 71 | +| Treemap | `treemap-beta` | Verify first | Hierarchical quantities. | No real quantities exist or labels are long. | |
| 72 | +| Venn | `venn` | Verify first | Small set overlap explanation. | More than 3 sets or non-overlap relationships. | |
| 73 | +| Ishikawa | `ishikawa` | Verify first | Root-cause analysis of errors or workflow failures. | The page is not diagnosing causes. | |
| 74 | +| Wardley map | `wardley` | Verify first | Strategy mapping with value chain and evolution axis. | Most guide content. It is specialized and may confuse readers. | |
| 75 | +| Packet | `packet-beta` | Usually not needed | Network packet structure. | Nearly all content in this repo. | |
| 76 | +| Event modeling | `eventModeling` | Usually not needed | Event-sourced systems with commands, events, views, and policies. | General research coding workflows. | |
| 77 | +| ZenUML | `zenuml` | Usually not needed | UML-like sequence diagrams if support is confirmed. | Standard `sequenceDiagram` is sufficient. | |
| 78 | +| TreeView | `tree` or documented current syntax | Usually not needed | Directory-like trees if support is confirmed. | A fenced text tree or Markdown list is clearer. | |
| 79 | + |
| 80 | +## Mermaid Defaults For This Site |
| 81 | + |
| 82 | +- Prefer `flowchart TB` for long sequences, branching decisions, convergence diagrams, and feedback loops. |
| 83 | +- Use `flowchart LR` only for compact pipelines that fit comfortably in the content column, usually 3-5 short nodes. |
| 84 | +- Avoid `TD` as a habit. Use `TB` for consistency unless an existing diagram uses `TD` and is already readable. |
| 85 | +- Consider `sequenceDiagram` instead of a flowchart when the central question is "who sends what to whom?" |
| 86 | +- Consider `stateDiagram-v2` instead of a flowchart when boxes represent statuses rather than tasks. |
| 87 | +- Consider `erDiagram` instead of a flowchart when boxes represent data entities or tables. |
| 88 | +- For complex flowcharts, use subgraphs only when they reduce cognitive load. If subgraphs make the diagram wider or harder to scan, split the visual or use prose. |
| 89 | +- Keep node labels short, concrete, and action-oriented. Move explanation to surrounding prose. |
| 90 | +- Prefer 5-9 nodes for most diagrams. Reconsider the format above 12 nodes. |
| 91 | +- Use decision diamonds only for real branch points with mutually meaningful paths. |
| 92 | +- Do not encode meaning only with color. Labels and structure must carry the meaning. |
| 93 | + |
| 94 | +## Accessibility Rules |
| 95 | + |
| 96 | +Every Mermaid block must include: |
| 97 | + |
| 98 | +```mermaid |
| 99 | +flowchart TB |
| 100 | + accTitle: Short useful title |
| 101 | + accDescr: One sentence describing the diagram's purpose and main structure. |
| 102 | +``` |
| 103 | + |
| 104 | +Use `accTitle` and `accDescr` for all diagram types. The title should name the visual, and the description should explain what the reader can learn from it. Do not repeat the page title as the only description. |
| 105 | + |
| 106 | +## Visual Style Rules |
| 107 | + |
| 108 | +- Use the repository's global Mermaid theme in `_includes/mermaid_config.js`; avoid one-off styling unless it fixes comprehension. |
| 109 | +- Avoid low-contrast custom colors and decorative gradients. |
| 110 | +- Do not use icons, emojis, or dense symbol systems inside node labels. |
| 111 | +- Keep arrows simple. Too many edge labels usually means the diagram needs to be split. |
| 112 | +- Use consistent terminology with the surrounding chapter. |
| 113 | +- Avoid long quoted prompt text inside Mermaid. Use a code block for prompts. |
| 114 | + |
| 115 | +## Review Checklist |
| 116 | + |
| 117 | +Before accepting a Mermaid change: |
| 118 | + |
| 119 | +- The visual has a clear teaching job that prose/table/code cannot do better. |
| 120 | +- The selected Mermaid type matches the relationship being explained. |
| 121 | +- The diagram type is supported by the current site Mermaid version or the version was intentionally upgraded. |
| 122 | +- `accTitle` and `accDescr` are present. |
| 123 | +- Orientation is readable in the Just the Docs content column. |
| 124 | +- Labels fit on mobile and do not duplicate adjacent prose. |
| 125 | +- The diagram does not imply quantitative precision unless the data are real. |
| 126 | +- The page still builds with Jekyll. |
| 127 | + |
| 128 | +## Validation |
| 129 | + |
| 130 | +Run the site build after changes: |
| 131 | + |
| 132 | +```text |
| 133 | +bundle exec jekyll build |
| 134 | +``` |
| 135 | + |
| 136 | +For layout-sensitive edits, preview locally at: |
| 137 | + |
| 138 | +```text |
| 139 | +http://127.0.0.1:4000/practical-genai-coding-guide/ |
| 140 | +``` |
0 commit comments