Skill Tracer
Skills › Scientific Agent Skills › markdown-mermaid-writing › markdown_style_guide.md

markdown_style_guide.md

722 lines · skills/markdown-mermaid-writing/references/markdown_style_guide.md at 5f2bc03

Open on GitHub

Most marks come from matching words in the file, so treat them as pointers.

1<!-- Source: https://github.com/SuperiorByteWorks-LLC/agent-project | License: Apache-2.0 | Author: Clayton Young / Superior Byte Works, LLC (Boreal Bytes) -->
2
3# Markdown Style Guide
4
5> **For AI agents:** Read this file for all core formatting rules. When creating any markdown document, follow these conventions for consistent, professional output. When a template exists for your document type, start from it — see [Templates](#templates).
6>
7> **For humans:** This guide ensures every markdown document in your project is clean, scannable, well-cited, and renders beautifully on GitHub. Reference it from your `AGENTS.md` or contributing guide.
8
9**Target platform:** GitHub-style Markdown; verify the exact host and export pipeline.
10**Reviewed:** 2026-10-01 against [CommonMark 0.31.2](https://spec.commonmark.org/0.31.2/),
11[GFM](https://github.github.com/gfm/), and current GitHub formatting documentation.
13Heading counts, emoji, separators, and citation placement below are optional house style.
14They are not Markdown conformance rules and do not override a requested format or an
15existing project/journal style. Tables and task lists are GFM extensions; footnotes,
16Mermaid, HTML details, and generated heading anchors depend on the host.
17**Design goal:** Clear, professional documents that communicate effectively through consistent structure, meaningful formatting, proper citations, and strategic use of diagrams.
19---

<!-- Source: https://github.com/SuperiorByteWorks-LLC/agent-project | License: Apache-2.0 | Author: Clayton Young / Superior Byte Works, LLC (Boreal Bytes) -->

Markdown Style Guide

For AI agents: Read this file for all core formatting rules. When creating any markdown document, follow these conventions for consistent, professional output. When a template exists for your document type, start from it — see Templates. For humans: This guide ensures every markdown document in your project is clean, scannable, well-cited, and renders beautifully on GitHub. Reference it from your AGENTS.md or contributing guide.

Target platform: GitHub-style Markdown; verify the exact host and export pipeline. Reviewed: 2026-10-01 against CommonMark 0.31.2, GFM, and current GitHub formatting documentation.

Heading counts, emoji, separators, and citation placement below are optional house style. They are not Markdown conformance rules and do not override a requested format or an existing project/journal style. Tables and task lists are GFM extensions; footnotes, Mermaid, HTML details, and generated heading anchors depend on the host. Design goal: Clear, professional documents that communicate effectively through consistent structure, meaningful formatting, proper citations, and strategic use of diagrams.


Raw lines 1 to 20
Project instruction file AGENTS.md :7
21## Quick Start for Agents
231. **Identify the document type** → Check if a [template](#templates) exists
242. **Structure first** → Heading hierarchy, then content
253. **Apply formatting from this guide** → Headings, text, lists, tables, images, links
264. **Add citations** → Footnote references for all claims and sources
275. **Consider diagrams** → Would a [Mermaid diagram](mermaid_style_guide.md) communicate this better than text?
286. **Add collapsible sections** → For supplementary detail, speaker notes, or lengthy context
297. **Verify** → Run through the [quality checklist](#quality-checklist)
31---

Quick Start for Agents

  1. Identify the document type → Check if a template exists
  2. Structure first → Heading hierarchy, then content
  3. Apply formatting from this guide → Headings, text, lists, tables, images, links
  4. Add citations → Footnote references for all claims and sources
  5. Consider diagrams → Would a Mermaid diagram communicate this better than text?
  6. Add collapsible sections → For supplementary detail, speaker notes, or lengthy context
  7. Verify → Run through the quality checklist

Raw lines 21 to 32
33## Core Principles
35| # | Principle | Rule |
36| --- | --------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
37| 1 | **Answer before they ask** | Anticipate reader questions and address them inline. A great document resolves doubts as they form — the reader finishes with no lingering "but what about...?" |
38| 2 | **Scannable first** | Readers skim before they read. Use headings, bold, and lists to make the structure visible at a glance. |
39| 3 | **Cite everything** | Every claim, statistic, or external reference gets a footnote citation with a full URL. No orphan claims. |
40| 4 | **Diagrams over walls of text** | If a concept involves flow, relationships, or structure, use a [Mermaid diagram](mermaid_style_guide.md) alongside the text. |
41| 5 | **Generous with information** | Don't hide the details — surface them. Use collapsible sections for depth without clutter, but never omit information because "they probably don't need it." If it's relevant, include it. |
42| 6 | **Consistent structure** | Same heading hierarchy, same formatting patterns, same emoji placement across every document. |
43| 7 | **One idea per section** | Each heading should cover one topic. If you're covering two ideas, split into two headings. |
44| 8 | **Professional but approachable** | Clean formatting, no clutter, no decorative noise — but not stiff or academic. Write like a senior engineer explains to a colleague. |
46---

Core Principles

#PrincipleRule
1Answer before they askAnticipate reader questions and address them inline. A great document resolves doubts as they form — the reader finishes with no lingering "but what about...?"
2Scannable firstReaders skim before they read. Use headings, bold, and lists to make the structure visible at a glance.
3Cite everythingEvery claim, statistic, or external reference gets a footnote citation with a full URL. No orphan claims.
4Diagrams over walls of textIf a concept involves flow, relationships, or structure, use a Mermaid diagram alongside the text.
5Generous with informationDon't hide the details — surface them. Use collapsible sections for depth without clutter, but never omit information because "they probably don't need it." If it's relevant, include it.
6Consistent structureSame heading hierarchy, same formatting patterns, same emoji placement across every document.
7One idea per sectionEach heading should cover one topic. If you're covering two ideas, split into two headings.
8Professional but approachableClean formatting, no clutter, no decorative noise — but not stiff or academic. Write like a senior engineer explains to a colleague.

Raw lines 33 to 47
48## 🗂️ Optional repository records
50Markdown can preserve portable decision records and report snapshots. The issue, PR,
51and kanban templates support projects that choose file-based records; they do not change
52an existing tracker workflow or automatically synchronize with GitHub, GitLab, or another
53service. Preserve the project's actual source of truth and link to the live record when
54needed. Writing a file does not create an issue, post a comment, or update a board.
56See [File conventions](#file-conventions-for-tracked-documents) for suggested names.
58---

🗂️ Optional repository records

Markdown can preserve portable decision records and report snapshots. The issue, PR, and kanban templates support projects that choose file-based records; they do not change an existing tracker workflow or automatically synchronize with GitHub, GitLab, or another service. Preserve the project's actual source of truth and link to the live record when needed. Writing a file does not create an issue, post a comment, or update a board.

See File conventions for suggested names.


Raw lines 48 to 59
60## Document Structure

Document Structure

Raw lines 60 to 61
62### Title and metadata
64Every document starts with exactly one H1 title, followed by a brief context line and a separator:
66```markdown
67# Document Title Here
69_Brief context — project name, date, or purpose in one line_
71---
72```
74- **One H1 per document** — never more
75- Context line in italics — what this document is, when, and for whom
76- Horizontal rule separates metadata from content

Title and metadata

Every document starts with exactly one H1 title, followed by a brief context line and a separator:

# Document Title Here

_Brief context — project name, date, or purpose in one line_

---
  • One H1 per document — never more
  • Context line in italics — what this document is, when, and for whom
  • Horizontal rule separates metadata from content
Raw lines 62 to 77
78### Heading hierarchy
80| Level | Syntax | Use | Max per document |
81| ----- | --------------- | ----------------------- | ------------------- |
82| H1 | `# Title` | Document title | **1** (exactly one) |
83| H2 | `## Section` | Major sections | 4–10 |
84| H3 | `### Topic` | Topics within a section | 2–5 per H2 |
85| H4 | `#### Subtopic` | Subtopics when needed | 2–4 per H3 |
86| H5+ | Never use | — | 0 |
88**Rules:**
90- **Never skip levels** — don't jump from H2 to H4
91- **Emoji in H2 headings** — one emoji per H2, at the start: `## 📋 Project Overview`
92- **No emoji in H3/H4** — keep sub-headings clean
93- **Sentence case** — `## 📋 Project overview` not `## 📋 Project Overview` (exception: proper nouns)
94- **Descriptive headings** — `### Authentication flow` not `### Details`
96---

Heading hierarchy

LevelSyntaxUseMax per document
H1# TitleDocument title1 (exactly one)
H2## SectionMajor sections4–10
H3### TopicTopics within a section2–5 per H2
H4#### SubtopicSubtopics when needed2–4 per H3
H5+Never use—0

Rules:

  • Never skip levels — don't jump from H2 to H4
  • Emoji in H2 headings — one emoji per H2, at the start: ## 📋 Project Overview
  • No emoji in H3/H4 — keep sub-headings clean
  • Sentence case — ## 📋 Project overview not ## 📋 Project Overview (exception: proper nouns)
  • Descriptive headings — ### Authentication flow not ### Details

Raw lines 78 to 97
98## Text Formatting

Text Formatting

Raw lines 98 to 99
100### Bold, italic, code
102| Format | Syntax | When to use | Example |
103| ---------- | ------------ | --------------------------------------------- | ----------------------------------- |
104| **Bold** | `**text**` | Key terms, important concepts, emphasis | **Primary database** handles writes |
105| _Italic_ | `*text*` | Definitions, titles, subtle emphasis | The process is called _sharding_ |
106| `Code` | `` `text` `` | Technical terms, commands, file names, values | Run `npm install` to install |
107| ~~Strike~~ | `~~text~~` | Deprecated content, corrections | ~~Old approach~~ replaced by v2 |
109**Rules:**
111- **Bold sparingly** — if everything is bold, nothing is. Max 2–3 bold terms per paragraph.
112- **Don't combine** bold and italic (`***text***`) — pick one
113- **Code for anything technical** — file names (`README.md`), commands (`git push`), config values (`true`), environment variables (`NODE_ENV`)
114- **Never bold entire sentences** — bold the key word(s) within the sentence

Bold, italic, code

FormatSyntaxWhen to useExample
Bold**text**Key terms, important concepts, emphasisPrimary database handles writes
Italic*text*Definitions, titles, subtle emphasisThe process is called sharding
Code` text `Technical terms, commands, file names, valuesRun npm install to install
~~Strike~~~~text~~Deprecated content, corrections~~Old approach~~ replaced by v2

Rules:

  • Bold sparingly — if everything is bold, nothing is. Max 2–3 bold terms per paragraph.
  • Don't combine bold and italic (***text***) — pick one
  • Code for anything technical — file names (README.md), commands (git push), config values (true), environment variables (NODE_ENV)
  • Never bold entire sentences — bold the key word(s) within the sentence
Raw lines 100 to 115
Uses an outside tool ~~text :107
116### Blockquotes
118Use blockquotes for definitions, callouts, and important notes:
120```markdown
121> **Definition:** A _load balancer_ distributes incoming network traffic
122> across multiple servers to ensure no single server bears too much demand.
123```
125For warnings and callouts:
127```markdown
128> ⚠️ **Warning:** This operation is destructive and cannot be undone.
130> 💡 **Tip:** Use `--dry-run` to preview changes before applying.
132> 📌 **Note:** This requires admin permissions on the repository.
133```
135- Prefix with emoji + bold label for typed callouts
136- Keep blockquotes to 1–3 lines
137- Don't nest blockquotes (`>>`)
139---

Blockquotes

Use blockquotes for definitions, callouts, and important notes:

> **Definition:** A _load balancer_ distributes incoming network traffic
> across multiple servers to ensure no single server bears too much demand.

For warnings and callouts:

> ⚠️ **Warning:** This operation is destructive and cannot be undone.

> 💡 **Tip:** Use `--dry-run` to preview changes before applying.

> 📌 **Note:** This requires admin permissions on the repository.
  • Prefix with emoji + bold label for typed callouts
  • Keep blockquotes to 1–3 lines
  • Don't nest blockquotes (>>)

Raw lines 116 to 140
143### When to use each type
145| List type | Syntax | Use when |
146| --------- | ------------ | ----------------------------------------- |
147| Bullet | `- item` | Items have no inherent order |
148| Numbered | `1. step` | Steps must happen in sequence |
149| Checkbox | `- [ ] item` | Tracking completion (agendas, checklists) |

When to use each type

List typeSyntaxUse when
Bullet- itemItems have no inherent order
Numbered1. stepSteps must happen in sequence
Checkbox- [ ] itemTracking completion (agendas, checklists)
Raw lines 143 to 150
151### Formatting rules
153- **Indent nested items under the parent item text** — commonly 2 spaces after `- ` and 3 after `1. `. Marker width matters; a universal 2-space rule breaks ordered lists
154- **Parallel structure** — every item in a list should have the same grammatical form
155- **No period at end** unless items are full sentences
156- **Keep items concise** — if a bullet needs a paragraph, it should be a sub-section instead
157- **Max nesting depth: 2 levels** — if you need a third level, restructure
159```markdown
160✅ Good — parallel structure, concise:
162- Configure the database connection
163- Run the migration scripts
164- Verify the schema changes
166❌ Bad — mixed structure, verbose:
168- You need to configure the database
169- Migration scripts
170- After that, you should verify that the schema looks correct
171```
173---

Formatting rules

  • Indent nested items under the parent item text — commonly 2 spaces after - and 3 after 1. . Marker width matters; a universal 2-space rule breaks ordered lists
  • Parallel structure — every item in a list should have the same grammatical form
  • No period at end unless items are full sentences
  • Keep items concise — if a bullet needs a paragraph, it should be a sub-section instead
  • Max nesting depth: 2 levels — if you need a third level, restructure
✅ Good — parallel structure, concise:

- Configure the database connection
- Run the migration scripts
- Verify the schema changes

❌ Bad — mixed structure, verbose:

- You need to configure the database
- Migration scripts
- After that, you should verify that the schema looks correct

Raw lines 151 to 174
175## Links and Citations

Links and Citations

Raw lines 175 to 176
177### Inline links
179```markdown
180See the [Mermaid Style Guide](mermaid_style_guide.md) for diagram conventions.
181```
183- **Meaningful link text** — `[Mermaid Style Guide]` not `[click here]` or `[link]`
184- **Relative paths** for internal links — resolve them from the containing Markdown file, including copied templates
185- **Full URLs** for external links — always `https://`

Inline links

See the [Mermaid Style Guide](mermaid_style_guide.md) for diagram conventions.
  • Meaningful link text — [Mermaid Style Guide] not [click here] or [link]
  • Relative paths for internal links — resolve them from the containing Markdown file, including copied templates
  • Full URLs for external links — always https://
Raw lines 177 to 186
187### Footnote citations
189Cite external factual claims with sources that support them. Use footnotes if the
190destination supports them; otherwise use inline/reference links or the required citation
191style. A citation must support the claim, not merely point to a related page. Explicitly
192label synthetic data and distinguish it from measurements; never invent references.
194```markdown
195Markdown was created by John Gruber in 2004 as a lightweight
196markup language designed for readability[^1]. GitHub adopted
197Mermaid diagram support in February 2022[^2].
199[^1]: Gruber, J. (2004). "Markdown." _Daring Fireball_. https://daringfireball.net/projects/markdown/
201[^2]: GitHub Blog. (2022). "Include diagrams in your Markdown files with Mermaid." https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/
202```
204**Citation format:**
206```
207[^N]: Author/Org. (Year). "Title." *Publication*. https://full-url
208```
210**Rules:**
212- **Number sequentially** — `[^1]`, `[^2]`, `[^3]` in order of appearance
213- **Full URL always included** — the reader must be able to reach the source
214- **Group all footnotes at the document bottom** — under a `## References` section or at the very end
215- **Every external claim needs one** — statistics, quotes, methodologies, tools mentioned
216- **Internal project links don't need footnotes** — use inline links instead

Footnote citations

Cite external factual claims with sources that support them. Use footnotes if the destination supports them; otherwise use inline/reference links or the required citation style. A citation must support the claim, not merely point to a related page. Explicitly label synthetic data and distinguish it from measurements; never invent references.

Markdown was created by John Gruber in 2004 as a lightweight
markup language designed for readability[^1]. GitHub adopted
Mermaid diagram support in February 2022[^2].

[^1]: Gruber, J. (2004). "Markdown." _Daring Fireball_. https://daringfireball.net/projects/markdown/

[^2]: GitHub Blog. (2022). "Include diagrams in your Markdown files with Mermaid." https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/

Citation format:

[^N]: Author/Org. (Year). "Title." *Publication*. https://full-url

Rules:

  • Number sequentially — [^1], [^2], [^3] in order of appearance
  • Full URL always included — the reader must be able to reach the source
  • Group all footnotes at the document bottom — under a ## References section or at the very end
  • Every external claim needs one — statistics, quotes, methodologies, tools mentioned
  • Internal project links don't need footnotes — use inline links instead
Raw lines 187 to 217
218### Reference-style links (for repeated URLs)
220When the same URL appears multiple times, use reference-style links to keep the text clean:
222```markdown
223The [official docs][mermaid-docs] cover all diagram types.
224See [Mermaid documentation][mermaid-docs] for the full syntax.
226[mermaid-docs]: https://mermaid.js.org/ 'Mermaid Documentation'
227```
229---

Reference-style links (for repeated URLs)

When the same URL appears multiple times, use reference-style links to keep the text clean:

The [official docs][mermaid-docs] cover all diagram types.
See [Mermaid documentation][mermaid-docs] for the full syntax.

[mermaid-docs]: https://mermaid.js.org/ 'Mermaid Documentation'

Raw lines 218 to 230
231## Images and Figures

Images and Figures

Raw lines 231 to 232
233### Placement and syntax
235```markdown
236![Descriptive alt text for screen readers](images/architecture_overview.png)
237_Figure 1: System architecture showing the three-tier deployment model_
238```
240**Rules:**
242- **Inline with content** — place images where they're relevant, not in a separate "Images" section
243- **Descriptive alt text** — `![Three-tier architecture diagram]` not `![image]` or `![screenshot]`
244- **Italic caption below** — `*Figure N: What this image shows*`
245- **Number figures sequentially** — Figure 1, Figure 2, etc. if multiple images
246- **Relative paths** — `images/file.png` not absolute paths
247- **Reasonable file sizes** — compress PNGs, use SVG where possible

Placement and syntax

![Descriptive alt text for screen readers](images/architecture_overview.png)
_Figure 1: System architecture showing the three-tier deployment model_

Rules:

  • Inline with content — place images where they're relevant, not in a separate "Images" section
  • Descriptive alt text — ![Three-tier architecture diagram] not ![image] or ![screenshot]
  • Italic caption below — *Figure N: What this image shows*
  • Number figures sequentially — Figure 1, Figure 2, etc. if multiple images
  • Relative paths — images/file.png not absolute paths
  • Reasonable file sizes — compress PNGs, use SVG where possible
Raw lines 233 to 248
249### Image naming convention
251```
252{document-slug}_{description}.{ext}
254Examples:
255 auth_flow_overview.png
256 deployment_architecture.svg
257 api_response_example.png
258```

Image naming convention

{document-slug}_{description}.{ext}

Examples:
  auth_flow_overview.png
  deployment_architecture.svg
  api_response_example.png
Raw lines 249 to 259
260### When NOT to use an image
262If the content could be expressed as a **Mermaid diagram**, prefer that over a static image:
264| Scenario | Use |
265| -------------------------- | ------------------------------------------ |
266| Architecture diagram | Mermaid `flowchart` or `architecture-beta` |
267| Sequence/interaction | Mermaid `sequenceDiagram` |
268| Data model | Mermaid `erDiagram` |
269| Timeline | Mermaid `timeline` or `gantt` |
270| Screenshot of UI | Image (Mermaid can't do this) |
271| Photo / real-world image | Image |
272| Complex data visualization | Scientific plotting with source data/code |
274See the [Mermaid Style Guide](mermaid_style_guide.md) for diagram type selection and styling.
276---

When NOT to use an image

If the content could be expressed as a Mermaid diagram, prefer that over a static image:

ScenarioUse
Architecture diagramMermaid flowchart or architecture-beta
Sequence/interactionMermaid sequenceDiagram
Data modelMermaid erDiagram
TimelineMermaid timeline or gantt
Screenshot of UIImage (Mermaid can't do this)
Photo / real-world imageImage
Complex data visualizationScientific plotting with source data/code

See the Mermaid Style Guide for diagram type selection and styling.


Raw lines 260 to 277
280### When to use tables
282- **Structured comparisons** — features, options, tradeoffs
283- **Reference data** — configuration values, API parameters, status codes
284- **Schedules and matrices** — timelines, responsibility assignments

When to use tables

  • Structured comparisons — features, options, tradeoffs
  • Reference data — configuration values, API parameters, status codes
  • Schedules and matrices — timelines, responsibility assignments
Raw lines 280 to 285
286### When NOT to use tables
288- **Narrative content** — use paragraphs instead
289- **Simple lists** — use bullet points
290- **More than 5 columns** — becomes unreadable on mobile; restructure

When NOT to use tables

  • Narrative content — use paragraphs instead
  • Simple lists — use bullet points
  • More than 5 columns — becomes unreadable on mobile; restructure
Raw lines 286 to 291
292### Formatting
294```markdown
295| Feature | Free Tier | Pro Tier | Enterprise |
296| ------- | --------- | -------- | ---------- |
297| Users | 5 | 50 | Unlimited |
298| Storage | 1 GB | 100 GB | Custom |
299| Support | Community | Email | Dedicated |
300```
302**Rules:**
304- **Header row always** — no headerless tables
305- **Left-align text columns** — `|---|` (default)
306- **Right-align number columns** — `|---:|` when appropriate
307- **Concise cell content** — 1–5 words per cell. If you need more, it's not a table problem
308- **Bold key column** — the first column or the column the reader scans first
309- **Consistent formatting within columns** — don't mix sentences and fragments
311---

Formatting

| Feature | Free Tier | Pro Tier | Enterprise |
| ------- | --------- | -------- | ---------- |
| Users   | 5         | 50       | Unlimited  |
| Storage | 1 GB      | 100 GB   | Custom     |
| Support | Community | Email    | Dedicated  |

Rules:

  • Header row always — no headerless tables
  • Left-align text columns — |---| (default)
  • Right-align number columns — |---:| when appropriate
  • Concise cell content — 1–5 words per cell. If you need more, it's not a table problem
  • Bold key column — the first column or the column the reader scans first
  • Consistent formatting within columns — don't mix sentences and fragments

Raw lines 292 to 312
313## Code Blocks
315### Inline code
317Use backticks for technical terms within prose:
319```markdown
320Run `git status` to check for uncommitted changes.
321The `NODE_ENV` variable controls the runtime environment.
322```

Inline code

Use backticks for technical terms within prose:

Run `git status` to check for uncommitted changes.
The `NODE_ENV` variable controls the runtime environment.
Raw lines 315 to 323
324### Fenced code blocks
326Always specify the language for syntax highlighting:
328````markdown
329```python
330def calculate_average(values: list[float]) -> float:
331 """Return the arithmetic mean of a list of values."""
332 return sum(values) / len(values)
333```
334````
336**Rules:**
338- **Always include language identifier** — ` ```python `, ` ```bash `, ` ```json `, etc.
339- **Use ` ```text ` for plain output** — not ` ``` ` with no language
340- **Keep blocks focused** — show the relevant snippet, not the entire file
341- **Add a comment if context needed** — `# Configure the database connection` at the top of the block
343---

Fenced code blocks

Always specify the language for syntax highlighting:

def calculate_average(values: list[float]) -> float: """Return the arithmetic mean of a list of values.""" return sum(values) / len(values)

Rules:

  • Always include language identifier — `python , `bash , `json , etc.
  • **Use `text for plain output** — not ` with no language
  • Keep blocks focused — show the relevant snippet, not the entire file
  • Add a comment if context needed — # Configure the database connection at the top of the block

Raw lines 324 to 344
345## Collapsible Sections
347Use HTML `<details>` for supplementary content that shouldn't clutter the main flow — speaker notes, implementation details, verbose logs, or optional deep-dives.
349```markdown
350<details>
351<summary><strong>💬 Speaker Notes</strong></summary>
353- Key talking point one
354- Transition to next topic
355- **Bold** emphasis works inside details
356- [Links](https://example.com) work too
358</details>
360---
361```
363**Rules:**
365- **Collapsed by default** — the `<details>` tag collapses automatically
366- **Descriptive summary** — `<strong>💬 Speaker Notes</strong>` or `<strong>📋 Implementation Details</strong>`
367- **Blank line after `<summary>` tag** — required for markdown to render inside the block
368- **Optional house style:** follow with `---` if the extra separator improves clarity
369- **GitHub supports Markdown inside details** with blank lines around the Markdown content. Other renderers may sanitize HTML or leave it unparsed; preview the exported result

Collapsible Sections

Use HTML <details> for supplementary content that shouldn't clutter the main flow — speaker notes, implementation details, verbose logs, or optional deep-dives.

<details>
<summary><strong>💬 Speaker Notes</strong></summary>

- Key talking point one
- Transition to next topic
- **Bold** emphasis works inside details
- [Links](https://example.com) work too

</details>

---

Rules:

  • Collapsed by default — the <details> tag collapses automatically
  • Descriptive summary — <strong>💬 Speaker Notes</strong> or <strong>📋 Implementation Details</strong>
  • **Blank line after <summary> tag** — required for markdown to render inside the block
  • Optional house style: follow with --- if the extra separator improves clarity
  • GitHub supports Markdown inside details with blank lines around the Markdown content. Other renderers may sanitize HTML or leave it unparsed; preview the exported result
Raw lines 345 to 370
371### Common collapsible patterns
373| Summary label | Use for |
374| --------------------- | ------------------------------------------------ |
375| 💬 **Speaker Notes** | Presentation talking points, timing, transitions |
376| 📋 **Details** | Extended explanation, verbose context |
377| 🔧 **Implementation** | Technical details, code samples, config |
378| 📊 **Raw Data** | Full output, logs, data tables |
379| 💡 **Background** | Context that helps but isn't essential |
381---

Common collapsible patterns

Summary labelUse for
💬 Speaker NotesPresentation talking points, timing, transitions
📋 DetailsExtended explanation, verbose context
🔧 ImplementationTechnical details, code samples, config
📊 Raw DataFull output, logs, data tables
💡 BackgroundContext that helps but isn't essential

Raw lines 371 to 382
383## Horizontal Rules
385Use `---` (three hyphens) for visual separation:
387```markdown
388---
389```
391**When to use:**
393- **After every `</details>` block** — mandatory, creates clear separation
394- **After title/metadata** — separates document header from content
395- **Between major sections** — when an H2 heading alone doesn't create enough visual break
396- **Before footnotes/references** — separates content from citation list
398**When NOT to use:**
400- Between every paragraph (too busy)
401- Between H3 sub-sections within the same H2 (use whitespace instead)
403---

Horizontal Rules

Use --- (three hyphens) for visual separation:

---

When to use:

  • **After every </details> block** — mandatory, creates clear separation
  • After title/metadata — separates document header from content
  • Between major sections — when an H2 heading alone doesn't create enough visual break
  • Before footnotes/references — separates content from citation list

When NOT to use:

  • Between every paragraph (too busy)
  • Between H3 sub-sections within the same H2 (use whitespace instead)

Raw lines 383 to 404
405## Approved Emoji Set
407One emoji per H2 heading, at the start. Use sparingly in body text for callouts and emphasis only.

Approved Emoji Set

One emoji per H2 heading, at the start. Use sparingly in body text for callouts and emphasis only.

Raw lines 405 to 408
409### Section headings
411| Emoji | Use for |
412| ----- | -------------------------------------- |
413| 📋 | Overview, summary, agenda, checklist |
414| 🎯 | Goals, objectives, outcomes, targets |
415| 📚 | Content, documentation, main body |
416| 🔗 | Resources, references, links |
417| 📍 | Agenda, navigation, current position |
418| 🏠 | Housekeeping, logistics, announcements |
419| ✍️ | Tasks, assignments, action items |

Section headings

EmojiUse for
📋Overview, summary, agenda, checklist
🎯Goals, objectives, outcomes, targets
📚Content, documentation, main body
🔗Resources, references, links
📍Agenda, navigation, current position
🏠Housekeeping, logistics, announcements
✍️Tasks, assignments, action items
Raw lines 409 to 420
421### Status and outcomes
423| Emoji | Meaning |
424| ----- | ------------------------------------ |
425| ✅ | Success, complete, correct, approved |
426| ❌ | Failure, incorrect, avoid, rejected |
427| ⚠️ | Warning, caution, important notice |
428| 💡 | Tip, insight, idea, best practice |
429| 📌 | Important, key point, remember |
430| 🚫 | Prohibited, do not, blocked |

Status and outcomes

EmojiMeaning
✅Success, complete, correct, approved
❌Failure, incorrect, avoid, rejected
⚠️Warning, caution, important notice
💡Tip, insight, idea, best practice
📌Important, key point, remember
🚫Prohibited, do not, blocked
Raw lines 421 to 431
432### Technical and process
434| Emoji | Meaning |
435| ----- | --------------------------------- |
436| ⚙️ | Configuration, settings, process |
437| 🔧 | Tools, utilities, setup |
438| 🔍 | Analysis, investigation, review |
439| 📊 | Data, metrics, analytics |
440| 📈 | Growth, trends, improvement |
441| 🔄 | Cycle, refresh, iteration |
442| ⚡ | Performance, speed, quick action |
443| 🔐 | Security, authentication, privacy |
444| 🌐 | Web, API, network, global |
445| 💾 | Storage, database, persistence |
446| 📦 | Package, artifact, deployment |

Technical and process

EmojiMeaning
⚙️Configuration, settings, process
🔧Tools, utilities, setup
🔍Analysis, investigation, review
📊Data, metrics, analytics
📈Growth, trends, improvement
🔄Cycle, refresh, iteration
⚡Performance, speed, quick action
🔐Security, authentication, privacy
🌐Web, API, network, global
💾Storage, database, persistence
📦Package, artifact, deployment
Raw lines 432 to 447
448### People and collaboration
450| Emoji | Meaning |
451| ----- | ----------------------------------- |
452| 👤 | User, person, individual |
453| 👥 | Team, group, collaboration |
454| 💬 | Discussion, comments, speaker notes |
455| 🎓 | Learning, education, knowledge |
456| 🤔 | Question, consideration, reflection |

People and collaboration

EmojiMeaning
👤User, person, individual
👥Team, group, collaboration
💬Discussion, comments, speaker notes
🎓Learning, education, knowledge
🤔Question, consideration, reflection
Raw lines 448 to 457
458### Emoji rules
4601. **One per H2 heading** at the start — `## 📋 Overview`
4612. **None in H3/H4** — keep sub-headings clean
4623. **Sparingly in body text** — for callouts (`> ⚠️ **Warning:**`) and key markers only
4634. **Never in**: titles (H1), code blocks, link text, table data cells
4645. **No decorative emoji** — 🎉 💯 🔥 🎊 💥 ✨ add noise, not meaning
4656. **Consistency** — same emoji = same meaning across all documents in the project
467---

Emoji rules

  1. One per H2 heading at the start — ## 📋 Overview
  2. None in H3/H4 — keep sub-headings clean
  3. Sparingly in body text — for callouts (> ⚠️ **Warning:**) and key markers only
  4. Never in: titles (H1), code blocks, link text, table data cells
  5. No decorative emoji — 🎉 💯 🔥 🎊 💥 ✨ add noise, not meaning
  6. Consistency — same emoji = same meaning across all documents in the project

Raw lines 458 to 468
469## Mermaid Diagram Integration
471Use Mermaid for structural relationships when it improves understanding. Use data-driven plotting for quantitative figures that need exact geometry, uncertainty, or a journal-specific format.

Mermaid Diagram Integration

Use Mermaid for structural relationships when it improves understanding. Use data-driven plotting for quantitative figures that need exact geometry, uncertainty, or a journal-specific format.

Raw lines 469 to 472
473### When to add a diagram
475If a diagram helps the reader, use the table to select a type and verify host support:
4771. **Read the [Mermaid Style Guide](mermaid_style_guide.md) first** — emoji, color palette, accessibility, complexity management
4782. **Then open the specific type file** — exemplar, tips, template, complex example
480| Your content describes... | Add a... | Type file |
481| ---------------------------------------------------- | ------------------------ | --------------------------------------------------- |
482| Steps in a process, workflow, decision logic | **Flowchart** | [flowchart.md](diagrams/flowchart.md) |
483| Who talks to whom and when (API calls, messages) | **Sequence diagram** | [sequence.md](diagrams/sequence.md) |
484| Class hierarchy, type relationships, interfaces | **Class diagram** | [class.md](diagrams/class.md) |
485| Status transitions, entity lifecycle, state machine | **State diagram** | [state.md](diagrams/state.md) |
486| Database schema, data model, entity relationships | **ER diagram** | [er.md](diagrams/er.md) |
487| Project timeline, roadmap, task dependencies | **Gantt chart** | [gantt.md](diagrams/gantt.md) |
488| Parts of a whole, proportions, distribution | **Pie chart** | [pie.md](diagrams/pie.md) |
489| Git branching strategy, merge/release flow | **Git Graph** | [git_graph.md](diagrams/git_graph.md) |
490| Concept hierarchy, brainstorm, topic map | **Mindmap** | [mindmap.md](diagrams/mindmap.md) |
491| Chronological events, milestones, history | **Timeline** | [timeline.md](diagrams/timeline.md) |
492| User experience, satisfaction scores, journey | **User Journey** | [user_journey.md](diagrams/user_journey.md) |
493| Two-axis comparison, prioritization matrix | **Quadrant chart** | [quadrant.md](diagrams/quadrant.md) |
494| Requirements traceability, compliance mapping | **Requirement diagram** | [requirement.md](diagrams/requirement.md) |
495| System architecture at varying zoom levels | **C4 diagram** | [c4.md](diagrams/c4.md) |
496| Flow magnitude, resource distribution, budgets | **Sankey diagram** | [sankey.md](diagrams/sankey.md) |
497| Numeric trends, bar charts, line charts | **XY Chart** | [xy_chart.md](diagrams/xy_chart.md) |
498| Component layout, spatial arrangement, layers | **Block diagram** | [block.md](diagrams/block.md) |
499| Work item tracking, status board, task columns | **Kanban board** | [kanban.md](diagrams/kanban.md) |
500| Binary protocol layout, data packet format | **Packet diagram** | [packet.md](diagrams/packet.md) |
501| Cloud infrastructure, service topology, networking | **Architecture diagram** | [architecture.md](diagrams/architecture.md) |
502| Multi-dimensional comparison, skills, radar analysis | **Radar chart** | [radar.md](diagrams/radar.md) |
503| Hierarchical proportions, budget breakdown | **Treemap** | [treemap.md](diagrams/treemap.md) |
505> 💡 **Pick the right type, not the easy type.** Don't default to flowcharts for everything — a timeline is better than a flowchart for chronological events, a sequence diagram is better for service interactions, an ER diagram is better for data models. Scan the table above and match your content to the most specific type. A short paragraph or data table can be clearer for a small amount of information.

When to add a diagram

If a diagram helps the reader, use the table to select a type and verify host support:

  1. Read the Mermaid Style Guide first — emoji, color palette, accessibility, complexity management
  2. Then open the specific type file — exemplar, tips, template, complex example
Your content describes...Add a...Type file
Steps in a process, workflow, decision logicFlowchartflowchart.md
Who talks to whom and when (API calls, messages)Sequence diagramsequence.md
Class hierarchy, type relationships, interfacesClass diagramclass.md
Status transitions, entity lifecycle, state machineState diagramstate.md
Database schema, data model, entity relationshipsER diagramer.md
Project timeline, roadmap, task dependenciesGantt chartgantt.md
Parts of a whole, proportions, distributionPie chartpie.md
Git branching strategy, merge/release flowGit Graphgit_graph.md
Concept hierarchy, brainstorm, topic mapMindmapmindmap.md
Chronological events, milestones, historyTimelinetimeline.md
User experience, satisfaction scores, journeyUser Journeyuser_journey.md
Two-axis comparison, prioritization matrixQuadrant chartquadrant.md
Requirements traceability, compliance mappingRequirement diagramrequirement.md
System architecture at varying zoom levelsC4 diagramc4.md
Flow magnitude, resource distribution, budgetsSankey diagramsankey.md
Numeric trends, bar charts, line chartsXY Chartxy_chart.md
Component layout, spatial arrangement, layersBlock diagramblock.md
Work item tracking, status board, task columnsKanban boardkanban.md
Binary protocol layout, data packet formatPacket diagrampacket.md
Cloud infrastructure, service topology, networkingArchitecture diagramarchitecture.md
Multi-dimensional comparison, skills, radar analysisRadar chartradar.md
Hierarchical proportions, budget breakdownTreemaptreemap.md
💡 Pick the right type, not the easy type. Don't default to flowcharts for everything — a timeline is better than a flowchart for chronological events, a sequence diagram is better for service interactions, an ER diagram is better for data models. Scan the table above and match your content to the most specific type. A short paragraph or data table can be clearer for a small amount of information.
Raw lines 473 to 506
507### How to integrate
509Place the diagram **inline with the related text**, not in a separate section:
511````markdown
512### Authentication Flow
514The login process validates credentials, checks MFA status,
515and issues session tokens. Failed attempts are logged for
516security monitoring.
518```mermaid
519sequenceDiagram
520accTitle: Login Authentication Flow
521accDescr: User login sequence through API and auth service
523 participant U as 👤 User
524 participant A as 🌐 API
525 participant S as 🔐 Auth Service
527 U->>A: POST /login
528 A->>S: Validate credentials
529 S-->>A: ✅ Token issued
530 A-->>U: 200 OK + session
532```
534The token expires after 24 hours. See [Authentication flow](#authentication-flow)
535for refresh token details.
536````
538**Always follow the [Mermaid Style Guide](mermaid_style_guide.md)** for diagram styling — emoji, color classes, accessibility (`accTitle`/`accDescr`), and type-specific conventions.
540---

How to integrate

Place the diagram inline with the related text, not in a separate section:

### Authentication Flow

The login process validates credentials, checks MFA status,
and issues session tokens. Failed attempts are logged for
security monitoring.

sequenceDiagram accTitle: Login Authentication Flow accDescr: User login sequence through API and auth service

participant U as 👤 User participant A as 🌐 API participant S as 🔐 Auth Service

U->>A: POST /login A->>S: Validate credentials S-->>A: ✅ Token issued A-->>U: 200 OK + session


The token expires after 24 hours. See [Authentication flow](#authentication-flow)
for refresh token details.

Always follow the Mermaid Style Guide for diagram styling — emoji, color classes, accessibility (accTitle/accDescr), and type-specific conventions.


Raw lines 507 to 541
542## Whitespace and Spacing
544- **Blank line between paragraphs** — always
545- **Blank line before and after headings** — always
546- **Blank line before and after code blocks** — always
547- **Blank line before and after blockquotes** — always
548- **No blank line between list items** — keep lists tight
549- **No trailing whitespace** — clean line endings
550- **One blank line at end of file** — standard convention
551- **No more than one consecutive blank line** — two blank lines = too much space
553---

Whitespace and Spacing

  • Blank line between paragraphs — always
  • Blank line before and after headings — always
  • Blank line before and after code blocks — always
  • Blank line before and after blockquotes — always
  • No blank line between list items — keep lists tight
  • No trailing whitespace — clean line endings
  • One blank line at end of file — standard convention
  • No more than one consecutive blank line — two blank lines = too much space

Raw lines 542 to 554
555## Quality Checklist

Quality Checklist

Raw lines 555 to 556
557### Structure
559- [ ] Exactly one H1 title
560- [ ] Heading hierarchy is correct (H1 → H2 → H3 → H4, no skips)
561- [ ] Each H2 has exactly one emoji at the start
562- [ ] H3 and H4 have no emoji
563- [ ] Horizontal rules after title metadata and after every `</details>` block

Structure

  • [ ] Exactly one H1 title
  • [ ] Heading hierarchy is correct (H1 → H2 → H3 → H4, no skips)
  • [ ] Each H2 has exactly one emoji at the start
  • [ ] H3 and H4 have no emoji
  • [ ] Horizontal rules after title metadata and after every </details> block
Raw lines 557 to 564
565### Content
567- [ ] Every external claim has a footnote citation
568- [ ] All footnotes have full URLs
569- [ ] All links tested and working
570- [ ] Meaningful link text (no "click here")
571- [ ] Bold used for key terms, not entire sentences
572- [ ] Code formatting for all technical terms

Content

  • [ ] Every external claim has a footnote citation
  • [ ] All footnotes have full URLs
  • [ ] All links tested and working
  • [ ] Meaningful link text (no "click here")
  • [ ] Bold used for key terms, not entire sentences
  • [ ] Code formatting for all technical terms
Raw lines 565 to 573
574### Visual elements
576- [ ] Images have descriptive alt text
577- [ ] Images have italic figure captions
578- [ ] Images placed inline with related content (not in separate section)
579- [ ] Tables have header rows and consistent formatting
580- [ ] Mermaid diagrams considered where applicable (with `accTitle`/`accDescr`)

Visual elements

  • [ ] Images have descriptive alt text
  • [ ] Images have italic figure captions
  • [ ] Images placed inline with related content (not in separate section)
  • [ ] Tables have header rows and consistent formatting
  • [ ] Mermaid diagrams considered where applicable (with accTitle/accDescr)
Raw lines 574 to 581
582### Collapsible sections
584- [ ] `<details>` blocks have descriptive `<summary>` labels
585- [ ] Blank line after `<summary>` tag (for markdown rendering)
586- [ ] Horizontal rule `---` after every `</details>` block
587- [ ] Content inside collapses renders correctly

Collapsible sections

  • [ ] <details> blocks have descriptive <summary> labels
  • [ ] Blank line after <summary> tag (for markdown rendering)
  • [ ] Horizontal rule --- after every </details> block
  • [ ] Content inside collapses renders correctly
Raw lines 582 to 588
589### Polish
591- [ ] No spelling or grammar errors
592- [ ] Consistent whitespace (no trailing spaces, no double blanks)
593- [ ] Parallel grammatical structure in lists
594- [ ] Renders correctly in GitHub light and dark mode
596---

Polish

  • [ ] No spelling or grammar errors
  • [ ] Consistent whitespace (no trailing spaces, no double blanks)
  • [ ] Parallel grammatical structure in lists
  • [ ] Renders correctly in GitHub light and dark mode

Raw lines 589 to 597
598## Templates
600Templates provide pre-built structures for common document types. Copy the template, fill in your content, and follow this style guide for formatting. Every template enforces the principles above — citations, diagrams, collapsible depth, and self-answering structure.
602| Document type | Template | Best for |
603| ------------------------------- | ----------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- |
604| Presentation / briefing | [presentation.md](../templates/presentation.md) | Slide-deck-style documents with speaker notes, structured sections, and visual flow |
605| Research paper / analysis | [research_paper.md](../templates/research_paper.md) | Data-driven analysis, literature reviews, methodology + findings with heavy citations |
606| Project documentation | [project_documentation.md](../templates/project_documentation.md) | Software/product docs — architecture, getting started, API reference, contribution guide |
607| Decision record (ADR/RFC) | [decision_record.md](../templates/decision_record.md) | Recording why a decision was made — context, options evaluated, outcome, consequences |
608| How-to / tutorial guide | [how_to_guide.md](../templates/how_to_guide.md) | Step-by-step instructions with prerequisites, verification steps, and troubleshooting |
609| Status report / executive brief | [status_report.md](../templates/status_report.md) | Progress updates, risk summaries, decisions needed — for leadership and stakeholders |
610| Pull request record | [pull_request.md](../templates/pull_request.md) | PR documentation with change inventory, testing evidence, rollback plan, and review notes |
611| Issue record | [issue.md](../templates/issue.md) | Bug reports (reproduction steps, root cause) and feature requests (acceptance criteria, user stories) |
612| Kanban board | [kanban.md](../templates/kanban.md) | Sprint/release/project work tracking with visual board, WIP limits, metrics, and blocked items |

Templates

Templates provide pre-built structures for common document types. Copy the template, fill in your content, and follow this style guide for formatting. Every template enforces the principles above — citations, diagrams, collapsible depth, and self-answering structure.

Document typeTemplateBest for
Presentation / briefingpresentation.mdSlide-deck-style documents with speaker notes, structured sections, and visual flow
Research paper / analysisresearch_paper.mdData-driven analysis, literature reviews, methodology + findings with heavy citations
Project documentationproject_documentation.mdSoftware/product docs — architecture, getting started, API reference, contribution guide
Decision record (ADR/RFC)decision_record.mdRecording why a decision was made — context, options evaluated, outcome, consequences
How-to / tutorial guidehow_to_guide.mdStep-by-step instructions with prerequisites, verification steps, and troubleshooting
Status report / executive briefstatus_report.mdProgress updates, risk summaries, decisions needed — for leadership and stakeholders
Pull request recordpull_request.mdPR documentation with change inventory, testing evidence, rollback plan, and review notes
Issue recordissue.mdBug reports (reproduction steps, root cause) and feature requests (acceptance criteria, user stories)
Kanban boardkanban.mdSprint/release/project work tracking with visual board, WIP limits, metrics, and blocked items
Raw lines 598 to 613
614### File conventions for tracked documents
616Some templates produce documents that accumulate over time. Use these directory conventions:
618| Document type | Directory | Naming pattern | Example |
619| ---------------- | ---------------------- | ------------------------------------------- | ----------------------------------------------------------------------- |
620| Pull requests | `docs/project/pr/` | `pr-NNNNNNNN-short-description.md` | `docs/project/pr/pr-00000123-fix-auth-timeout.md` |
621| Issues | `docs/project/issues/` | `issue-NNNNNNNN-short-description.md` | `docs/project/issues/issue-00000456-add-export-filter.md` |
622| Kanban boards | `docs/project/kanban/` | `{scope}-{identifier}-short-description.md` | `docs/project/kanban/sprint-2026-w07-agentic-template-modernization.md` |
623| Decision records | `docs/decisions/` | `NNN-{slug}.md` | `docs/decisions/001-use-postgresql.md` |
624| Status reports | `docs/status/` | `status-{date}.md` | `docs/status/status-2026-02-14.md` |

File conventions for tracked documents

Some templates produce documents that accumulate over time. Use these directory conventions:

Document typeDirectoryNaming patternExample
Pull requestsdocs/project/pr/pr-NNNNNNNN-short-description.mddocs/project/pr/pr-00000123-fix-auth-timeout.md
Issuesdocs/project/issues/issue-NNNNNNNN-short-description.mddocs/project/issues/issue-00000456-add-export-filter.md
Kanban boardsdocs/project/kanban/{scope}-{identifier}-short-description.mddocs/project/kanban/sprint-2026-w07-agentic-template-modernization.md
Decision recordsdocs/decisions/NNN-{slug}.mddocs/decisions/001-use-postgresql.md
Status reportsdocs/status/status-{date}.mddocs/status/status-2026-02-14.md
Raw lines 614 to 625
626### Choosing a template
628- **Presenting to people?** → Presentation
629- **Publishing analysis or research?** → Research paper
630- **Documenting a codebase or product?** → Project documentation
631- **Recording why you chose X over Y?** → Decision record
632- **Teaching someone how to do something?** → How-to guide
633- **Updating leadership on progress?** → Status report
634- **Documenting a PR for posterity?** → Pull request record
635- **Tracking a bug or requesting a feature?** → Issue record
636- **Managing work items for a sprint or project?** → Kanban board
637- **None of these fit?** → Start from this style guide's rules directly — no template required
639---

Choosing a template

  • Presenting to people? → Presentation
  • Publishing analysis or research? → Research paper
  • Documenting a codebase or product? → Project documentation
  • Recording why you chose X over Y? → Decision record
  • Teaching someone how to do something? → How-to guide
  • Updating leadership on progress? → Status report
  • Documenting a PR for posterity? → Pull request record
  • Tracking a bug or requesting a feature? → Issue record
  • Managing work items for a sprint or project? → Kanban board
  • None of these fit? → Start from this style guide's rules directly — no template required

Raw lines 626 to 640
641## Common Mistakes

Common Mistakes

Raw lines 641 to 642
643### ❌ Multiple emoji per heading
645```markdown
646## 📚📊📈 Content Topics ← Too many
647```
649✅ Fix: One emoji per H2
651```markdown
652## 📚 Content topics
653```

❌ Multiple emoji per heading

## 📚📊📈 Content Topics ← Too many

✅ Fix: One emoji per H2

## 📚 Content topics
Raw lines 643 to 654
655### ❌ Missing citations
657```markdown
658The renderer supports every diagram type. ← Which renderer/version?
659```
661✅ Fix: Add footnote
663```markdown
664GitHub documents Mermaid code blocks and an `info` diagram for checking its Mermaid version[^1].
666[^1]: GitHub Docs. "Creating diagrams." https://docs.github.com/en/get-started/writing-on-github/working-with-advanced-formatting/creating-diagrams
667```

❌ Missing citations

The renderer supports every diagram type. ← Which renderer/version?

✅ Fix: Add footnote

GitHub documents Mermaid code blocks and an `info` diagram for checking its Mermaid version[^1].

[^1]: GitHub Docs. "Creating diagrams." https://docs.github.com/en/get-started/writing-on-github/working-with-advanced-formatting/creating-diagrams
Raw lines 655 to 668
669### ❌ Wall of text without structure
671```markdown
672The system handles authentication by first checking the JWT token
673validity, then verifying the user exists in the database, then
674checking their permissions against the requested resource...
675```
677✅ Fix: Use a list, heading, or diagram
679```markdown
680### Authentication flow
6821. Validate JWT token signature and expiration
6832. Verify user exists in the database
6843. Check user permissions against the requested resource
685```

❌ Wall of text without structure

The system handles authentication by first checking the JWT token
validity, then verifying the user exists in the database, then
checking their permissions against the requested resource...

✅ Fix: Use a list, heading, or diagram

### Authentication flow

1. Validate JWT token signature and expiration
2. Verify user exists in the database
3. Check user permissions against the requested resource
Raw lines 669 to 686
687### ❌ Images in a separate section
689```markdown
690## Content
692[paragraphs of text]
694## Screenshots
696[all images grouped here] ← Disconnected from context
697```
699✅ Fix: Place images inline where relevant

❌ Images in a separate section

## Content

[paragraphs of text]

## Screenshots

[all images grouped here] ← Disconnected from context

✅ Fix: Place images inline where relevant

Raw lines 687 to 700
701### ❌ No horizontal rule after collapsible sections
703```markdown
704</details>
705### Next Topic ← Runs together visually
706```
708✅ Fix: Always add `---` after `</details>`
710```markdown
711</details>
713---
715### Next topic ← Clear separation
716```
718---

❌ No horizontal rule after collapsible sections

</details>
### Next Topic  ← Runs together visually

✅ Fix: Always add --- after </details>

</details>

---

### Next topic ← Clear separation

Raw lines 701 to 719
720## Resources
722- [GitHub Flavored Markdown Spec](https://github.github.com/gfm/) · [Mermaid Style Guide](mermaid_style_guide.md) · [GitHub Basic Formatting](https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax)