Просмотрщик и редактор Markdown с Mermaid

Документ Markdown

Пишите, вставляйте или откройте файл Markdown и сразу смотрите предпросмотр, как на GitHub: таблицы, списки задач, сноски, оповещения, диаграммы Mermaid, формулы LaTeX и подсветка кода. Затем его можно скачать как HTML или сохранить в PDF. Всё обрабатывается в вашем браузере.

Оглавление

Синхронная прокрутка

Учитывать переносы строк

---
title: "Пример документа"
tags: [markdown, mermaid, katex]
---

# Пример документа

Редактируйте этот текст и сразу смотрите результат. Поддерживаются **жирный**, *курсив*, ~~зачёркнутый~~, `код`, ссылки вроде https://ittools.tech и сноски[^1].

> [!NOTE]
> Оповещения GitHub тоже работают: попробуйте TIP, IMPORTANT, WARNING или CAUTION.

## Задачи и таблицы

- [x] Написать README
- [ ] Добавить диаграмму

| HTTP | Endpoint | Status |
|:-------|:-----|-------:|
| `GET` | `/api/users` | 200 |
| `POST` | `/api/users` | 201 |
| `DELETE` | `/api/users/42` | 204 |

```typescript
async function getUser(id: number): Promise<User> {
  const response = await fetch(`/api/users/${id}`);
  if (!response.ok) throw new Error(response.statusText);
  return response.json();
}
```

## Диаграммы и формулы

```mermaid
sequenceDiagram
    participant C as App
    participant A as API
    participant D as DB
    C->>A: GET /api/users/42
    A->>D: SELECT * FROM users WHERE id = 42
    D-->>A: row
    A-->>C: 200 OK (JSON)
```

```mermaid
flowchart LR
    A[Commit] --> B{Tests OK?}
    B -- ✓ --> C[Build]
    B -- ✗ --> D[Fix]
    D --> A
    C --> E[Deploy]
```

$$
\sum_{i=1}^{n} i = \frac{n(n+1)}{2}
$$

Euler: $e^{i\pi} + 1 = 0$

</details>

[^1]: Всё обрабатывается в вашем браузере; документ не отправляется ни на какой сервер.

Слов: 0 · строк: 0 · чтение: 0 мин

Как это работает

Markdown — это формат README, технической документации, вики и заметок почти в любом инструменте разработки, но каждая платформа добавляет свои расширения. Этот просмотрщик следует GitHub Flavored Markdown (GFM) — самому распространённому варианту: помимо основ, он отображает таблицы, списки задач, зачёркивание, автоссылки, сноски и оповещения NOTE, TIP, IMPORTANT, WARNING и CAUTION.

Блоки кода, помеченные как mermaid, превращаются в диаграммы (блок-схемы, последовательности, классы, состояния, сущность-связь, Ганта, Git и другие), формулы между знаками $ отрисовываются с помощью KaTeX, а остальной код подсвечивается согласно указанному языку. Если документ начинается с блока YAML между строками ---, как в Jekyll, Hugo или Docusaurus, он показывается отдельной таблицей.

Документ не покидает ваш браузер. HTML внутри него очищается перед показом, поэтому открытие чужого README не запускает скрипты, а библиотеки для диаграмм и формул загружаются, только если документ их использует.

Примеры

```mermaid
flowchart LR
  A[Commit] --> B[Build] --> C[Deploy]
```

Commit → Build → DeployБлок кода с языком mermaid отображается как диаграмма. Если в нём синтаксическая ошибка, код остаётся видимым, а под ним — сообщение Mermaid.

## Getting Started
## API v2.0 (beta)
## Getting Started

#getting-started · #api-v20-beta · #getting-started-1Заголовки получают такой же id, как на GitHub: строчные буквы, пробелы заменены дефисами, без знаков препинания и с номером в конце при повторе. Поэтому ссылка [текст](#getting-started) работает одинаково здесь и в репозитории.

Line one
Line two

<p>Line one
Line two</p>  →  <p>Line one<br>Line two</p>

В стандартном Markdown одиночный перенос строки не разрывает абзац: нужно оставить пустую строку или закончить строку двумя пробелами. Комментарии и issues на GitHub учитывают такие переносы: чтобы видеть так же, включите Учитывать переносы строк.

> [!WARNING]
> Breaking change in v3.

⚠ Warning — Breaking change in v3.Цитата, начинающаяся с [!NOTE], [!TIP], [!IMPORTANT], [!WARNING] или [!CAUTION], отображается как цветное оповещение, как на GitHub. На платформах, которые их не поддерживают, она выглядит как обычная цитата.

Сценарии использования

Проверить, как будет выглядеть README или CHANGELOG, перед отправкой в репозиторий.
Прочитать скачанный файл .md без установки редактора: откройте его кнопкой или перетащите.
Опробовать диаграммы Mermaid для архитектуры, процессов или последовательностей и исправить синтаксис с помощью живого предпросмотра.
Превратить документацию в автономную HTML-страницу или PDF, чтобы поделиться с теми, кто не пользуется Git.
Писать конспекты или техническую документацию с математическими формулами в нотации LaTeX.
Посмотреть текст в Markdown, который выдал ИИ-ассистент, с форматированием, таблицами и блоками кода.

Часто задаваемые вопросы

Какие типы диаграмм Mermaid можно строить?

Все, что есть в Mermaid: flowchart, sequenceDiagram, classDiagram, stateDiagram-v2, erDiagram, gantt, pie, journey, gitGraph, mindmap, timeline, quadrantChart, sankey, xychart, block, architecture, kanban и другие. Диаграммы используют светлые или тёмные цвета в зависимости от темы сайта и строятся в строгом режиме: текст подписей не может внедрить HTML или выполнить код по клику.

Как написать математическую формулу?

Между знаками $ для строчной формулы, например $a^2 + b^2 = c^2$, и между $$ или в блоке кода с языком math для формулы, выровненной по центру на отдельной строке. Синтаксис — LaTeX в том объёме, который поддерживает KaTeX. Чтобы написать знак $ буквально, как в цене, поставьте перед ним обратную косую черту; впрочем, "$5 и $10" не считается формулой, потому что перед вторым $ стоит пробел, а после него — цифра.

Можно ли использовать HTML внутри Markdown?

Да, как на GitHub: теги details и summary для раскрывающихся разделов, kbd для клавиш, sub и sup, img с размером или p с align. Перед показом удаляются скрипты, атрибуты событий вроде onclick, ссылки javascript: и теги style и form, поэтому чужой документ не может выполнить код или изменить остальную страницу.

Как сохранить в PDF?

Через Экспорт → Печать или сохранение в PDF открывается диалог печати только с документом, без интерфейса сайта, где нужно выбрать Сохранить как PDF. Таблицы, блоки кода и диаграммы по возможности не разрываются между страницами. Если вам нужен файл для публикации, Скачать .html создаёт автономную страницу со встроенными стилями.

Почему не отображается изображение с относительным путём?

Потому что у просмотрщика нет доступа к другим папкам репозитория: путь вроде ./docs/logo.png существует только на вашем диске или на GitHub. Изображения с полным адресом, начинающимся с https://, отображаются без проблем.