Визуализатор иерархии заголовков Markdown
Вставьте Markdown и визуализируйте структуру заголовков как интерактивное дерево. Анализируйте иерархию h1–h6, обнаруживайте проблемы вложенности и просматривайте статистику заголовков.
Ввод
Вывод
Документация
Что такое иерархия заголовков Markdown?
Заголовки Markdown определяются с помощью символа # — один # для H1, два для H2, до шести для H6. Они образуют структурную основу документа, подобно оглавлению. Хорошо структурированный документ использует заголовки в логическом, вложенном порядке: H1 как заголовок верхнего уровня, H2 для основных разделов, H3 для подразделов и так далее.
Когда заголовки используются не по порядку — например, переход от H2 непосредственно к H4 — это нарушает семантическую структуру и может повредить доступность (программы чтения с экрана полагаются на порядок заголовков) и SEO (поисковые системы используют заголовки для понимания иерархии контента). Визуализация иерархии позволяет легко выявить эти проблемы перед публикацией.
Описание инструмента
Этот инструмент анализирует текст Markdown и отображает все заголовки на основе # в виде интерактивного, сворачиваемого дерева. Вы можете сразу увидеть, как структурирован ваш документ, определить пропущенные уровни заголовков и подсчитать, сколько заголовков каждого типа присутствует.
Заголовки внутри блоков кода в ограде (``` или ~~~) игнорируются, поэтому результат отражает только реальную структуру документа.
Примеры
Входные данные:
# Getting Started
## Installation
### Prerequisites
### Steps
## Configuration
# Advanced Usage
## PluginsВыходное дерево:
H1 Getting Started
├── H2 Installation
│ ├── H3 Prerequisites
│ └── H3 Steps
└── H2 Configuration
H1 Advanced Usage
└── H2 PluginsВозможности
- Анализирует все заголовки H1–H6 из любого текста Markdown
- Отображает заголовки в виде интерактивного, сворачиваемого дерева с элементами управления разворачиванием/сворачиванием
- Пропускает заголовки внутри блоков кода в ограде (
```и~~~) - Показывает количество заголовков по уровням (H1–H6) и общее количество заголовков
- Поддерживает настраиваемую глубину начального разворачивания
Варианты использования
- Проверка документации — убедитесь, что длинный README или страница документации имеет последовательную, хорошо упорядоченную структуру заголовков перед публикацией.
- Аудит SEO — проверьте, что контент, предназначенный для веб-сайта, использует один H1 и логическую вложенность H2/H3, чтобы помочь поисковым системам понять структуру страницы.
- Проверка доступности — убедитесь, что уровни заголовков не пропускаются, что является распространённой проблемой доступности, отмеченной в рекомендациях WCAG.
Как это работает
Инструмент сканирует исходный код Markdown построчно. Любая строка, которая начинается с одного-шести символов #, за которыми следует пробел, рассматривается как заголовок. Двухпроходный алгоритм сначала собирает все заголовки по порядку, затем строит дерево, отслеживая стек открытых родительских узлов — каждый новый заголовок вложен под ближайший предыдущий заголовок более низкого уровня.
Советы
- Вставьте полный файл Markdown, включая front matter — инструмент игнорирует строки без заголовков, поэтому YAML front matter и текст тела не повлияют на результат.
- Используйте параметр Глубина начального разворачивания, чтобы автоматически свернуть глубокие уровни вложенности и сначала получить общий обзор.
- Снимите флажок Развернуть всё перед изучением большого документа, чтобы начать со свёрнутого состояния и детально изучить отдельные разделы.