Markdown Heading Hierarchy Visualizer
Paste Markdown and visualize the heading structure as an interactive tree. Analyze h1–h6 hierarchy, detect nesting issues, and view heading statistics.
Input
Output
Readme
What is a Markdown heading hierarchy?
Markdown headings are defined using the # symbol — one # for H1, two for H2, up to six for H6. They form the structural backbone of a document, similar to a table of contents. A well-structured document uses headings in a logical, nested order: H1 as the top-level title, H2 for major sections, H3 for subsections, and so on.
When headings are used out of order — for example, jumping from H2 directly to H4 — it breaks the semantic outline and can hurt accessibility (screen readers rely on heading order) and SEO (search engines use headings to understand content hierarchy). Visualizing the hierarchy makes it easy to spot these issues before publishing.
Tool description
This tool parses Markdown text and displays all #-based headings as an interactive, collapsible tree. You can see at a glance how your document is structured, identify skipped heading levels, and count how many headings of each type are present.
Headings inside fenced code blocks (``` or ~~~) are ignored, so the output only reflects real document structure.
Examples
Input:
# Getting Started
## Installation
### Prerequisites
### Steps
## Configuration
# Advanced Usage
## PluginsOutput tree:
H1 Getting Started
├── H2 Installation
│ ├── H3 Prerequisites
│ └── H3 Steps
└── H2 Configuration
H1 Advanced Usage
└── H2 PluginsFeatures
- Parses all H1–H6 headings from any Markdown text
- Renders headings as an interactive, collapsible tree with expand/collapse controls
- Skips headings inside fenced code blocks (
```and~~~) - Shows per-level heading counts (H1–H6) and a total heading count
- Supports configurable initial expansion depth
Use cases
- Documentation review — Check that a long README or documentation page has a consistent, well-ordered heading structure before publishing.
- SEO auditing — Verify that content intended for the web uses a single H1 and logical H2/H3 nesting to help search engine crawlers understand the page structure.
- Accessibility checking — Ensure heading levels are not skipped, which is a common accessibility issue flagged by WCAG guidelines.
How it works
The tool scans the Markdown source line by line. Any line that starts with one to six # characters followed by a space is treated as a heading. A two-pass algorithm first collects all headings in order, then builds a tree by tracking a stack of open parent nodes — each new heading is nested under the nearest preceding heading of a lower level.
Tips
- Paste a full Markdown file, including front matter — the tool ignores non-heading lines, so YAML front matter and body text won't affect the output.
- Use the Initial expansion depth setting to auto-collapse deep nesting levels and get a high-level overview first.
- Uncheck Expand All before exploring a large document to start collapsed and drill into specific sections.