Витрина Markdown и UI

Эта страница объединяет рендеринг markdown и превью UI-компонентов в одном месте.

Встроенные примеры: жирный, курсив, зачеркнутый, inline code и ссылка на путь.

Цитаты

Архитектура — это набор важных решений, которые трудно изменить.

Вложенная цитата: сначала оптимизируй ясность, потом оптимизируй масштаб.

Списки

Нумерованный + вложенный

1. Исследовать пространство проблемы
2. Собрать минимальный проверяемый MVP
   • Отслеживать метрики активации
   • Собирать качественную обратную связь
     • Заметки из интервью
     • Теги поддержки
3. Итерироваться каждую неделю
   1. Сформулировать гипотезу
   2. Выложить изменение
   3. Измерить результат

Маркированный + вложенный

• Платформа
  • Фронтенд
    • Роутинг
    • Состояния UI
  • Бэкенд
    • API-контракты
    • Модель данных
• Операции
  • Мониторинг
  • Реакция на инциденты

Чеклист

• Иерархия заголовков
• Вложенные списки
• Блоки кода
• UI-компоненты
• Финальный текст для продакшена

Таблица

Тип блока	Используемый пример	Зачем это нужно
Цитата	> text	Подчеркнуть принципы
Блок кода	```ts	Показать детали реализации
Вложенный список	- + отступ	Объяснить иерархию
Mermaid	```mermaid	Визуализировать потоки
UI-компоненты	Astro-компоненты	Проверить визуальную регрессию

UI-элементы

Виджеты из шаблона

Примеры кода

Bash

npm install
npm run dev
npm run build

TypeScript

type Stage = "mvp-foundation" | "problem-solution-fit" | "go-to-market" | "scale";

interface JourneyArticle {
  slug: string;
  title: string;
  stage: Stage;
  order: number;
}

export function sortArticles(items: JourneyArticle[]) {
  return [...items].sort((a, b) => a.order - b.order);
}

Python

from dataclasses import dataclass

@dataclass
class Metric:
    name: str
    value: float

metrics = [Metric("activation_rate", 0.31), Metric("retention_d7", 0.14)]
print({m.name: m.value for m in metrics})

SQL

SELECT stage, COUNT(*) AS articles
FROM journey_articles
GROUP BY stage
ORDER BY articles DESC;

JSON

{
  "project": "mvp-to-unicorn",
  "locale": "ru",
  "features": ["toc", "mermaid", "content-collections", "ui-showcase"]
}

YAML

name: preview
on: [push]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: npm ci && npm run build

Go

package main

import "fmt"

func main() {
    fmt.Println("MVP to Unicorn")
}

Mermaid

Flowchart: линейный путь (кастомная кривая + цвета)

%%{init: {"theme":"base","flowchart":{"curve":"basis"},"themeVariables":{"primaryColor":"#dbeafe","primaryTextColor":"#0f172a","primaryBorderColor":"#60a5fa","lineColor":"#475569"}}}%%
flowchart LR
    Idea[Идея] --> MVP[MVP]
    MVP --> Fit[Соответствие проблемы и решения]
    Fit --> GTM[Выход на рынок]
    GTM --> Scale[Масштаб]

Flowchart: ветвящиеся решения (ортогональные линии)

%%{init: {"theme":"base","flowchart":{"curve":"stepBefore"},"themeVariables":{"primaryColor":"#ede9fe","primaryBorderColor":"#8b5cf6","lineColor":"#6d28d9"}}}%%
flowchart TD
    Start([Старт]) --> Goal{Главная цель}
    Goal -->|Быстро проверить спрос| Managed[Управляемый стек]
    Goal -->|Глубоко изучить инфраструктуру| Custom[Кастомный стек]
    Managed --> A[Хостинговая аутентификация и управляемая БД]
    Managed --> B[Выпустить за несколько дней]
    Custom --> C[Свой сервер и собственный деплой]
    Custom --> D[Больше контроля, больше операционной нагрузки]

Sequence diagram (поток API + webhook)

%%{init: {"theme":"base","sequence":{"showSequenceNumbers":true},"themeVariables":{"primaryColor":"#dcfce7","primaryBorderColor":"#16a34a","lineColor":"#166534"}}}%%
sequenceDiagram
    participant U as Пользователь
    participant FE as Фронтенд
    participant API as API
    participant PAY as Платёжный провайдер
    participant DB as База данных

    U->>FE: Нажать "Upgrade"
    FE->>API: POST /checkout
    API->>PAY: Создать сессию
    PAY-->>FE: URL для редиректа
    U->>PAY: Завершить оплату
    PAY->>API: Webhook payment_succeeded
    API->>DB: Установить subscription = active
    API-->>FE: 200 OK

State diagram (жизненный цикл пользователя)

%%{init: {"theme":"base","themeVariables":{"primaryColor":"#fde68a","primaryBorderColor":"#d97706","lineColor":"#92400e"}}}%%
stateDiagram-v2
    [*] --> Посетитель
    Посетитель --> Зарегистрирован: регистрация
    Зарегистрирован --> Активирован: завершить онбординг
    Активирован --> Платящий: добавить способ оплаты
    Платящий --> Удержан: еженедельное использование
    Удержан --> Отток: неактивность
    Отток --> Удержан: кампания реактивации

ER diagram (основная доменная модель)

%%{init: {"theme":"base","themeVariables":{"primaryColor":"#e0f2fe","primaryBorderColor":"#0ea5e9","lineColor":"#0369a1"}}}%%
erDiagram
    USER ||--o{ PROJECT : владеет
    PROJECT ||--o{ RELEASE : содержит
    PROJECT ||--o{ METRIC : отслеживает
    RELEASE ||--o{ INCIDENT : может_вызвать

    USER {
      uuid id
      string email
    }
    PROJECT {
      uuid id
      string name
      string stage
    }
    RELEASE {
      uuid id
      datetime deployed_at
      string version
    }

Диаграмма пути продукта

%%{init: {"theme":"base","themeVariables":{"journeySectionColor":"#c7d2fe","journeyTaskFill":"#eef2ff","journeyTaskTextColor":"#1e1b4b"}}}%%
journey
    title Первая неделя нового пользователя
    section Знакомство
      Попасть на страницу: 3: Пользователь
      Прочитать ценностное предложение: 4: Пользователь
    section Активация
      Создать аккаунт: 4: Пользователь
      Завершить первое действие: 5: Пользователь
    section Удержание
      Вернуться на следующий день: 3: Пользователь
      Пригласить коллегу: 4: Пользователь

Pie chart (микс трафика)

%%{init: {"theme":"base","themeVariables":{"pie1":"#93c5fd","pie2":"#c4b5fd","pie3":"#86efac","pie4":"#fcd34d"}}}%%
pie showData
    title Каналы привлечения
    "Органика" : 42
    "Рефералы" : 23
    "Платный поиск" : 21
    "Партнёрства" : 14

Gantt chart (план релиза)

%%{init: {"theme":"base","themeVariables":{"primaryColor":"#bfdbfe","primaryBorderColor":"#2563eb","lineColor":"#1d4ed8"}}}%%
gantt
    title План релиза MVP
    dateFormat  YYYY-MM-DD
    section Основа
    Архитектурная база      :done, a1, 2026-03-01, 5d
    Трекинг событий         :active, a2, 2026-03-06, 4d
    section Активация
    Онбординг v1            :a3, 2026-03-10, 6d
    section Монетизация
    Ценовой эксперимент     :a4, 2026-03-16, 5d

Смешанный markdown + HTML

Раскрывающийся блок деталей

Это полезно для необязательных глубоких технических заметок.

---

Используй эту страницу как регрессионную песочницу для типографики, рендеринга markdown и поведения UI-компонентов.