Пример использования Mermaid

Вот простая диаграмма последовательности:

sequenceDiagram participant User participant API participant DB User->>API: GET /status API->>DB: Query status DB-->>API: Return status API-->>User: 200 OK

Или диаграмма состояний:

stateDiagram-v2 [*] --> Idle Idle --> Processing: Request Processing --> Success: OK Processing --> Error: Failed Success --> Idle: Reset Error --> Idle: Reset

Основные изменения, которые мы сделали:

  1. В main.go:

    • Добавили пользовательский рендерер для markdown
    • Добавили обработку блоков кода с пометкой mermaid
    • Улучшили парсинг markdown с дополнительными расширениями

  2. В templates/post.html:

    • Добавили библиотеку Mermaid.js
    • Настроили тему Mermaid в стиле Catppuccin Mocha
    • Добавили автоматическую инициализацию диаграмм

  3. В static/style.css:

    • Добавили стили для контейнеров диаграмм
    • Настроили отзывчивость диаграмм

Теперь вы можете создавать различные типы диаграмм в ваших постах: - Диаграммы последовательности (sequence diagrams) - Диаграммы состояний (state diagrams) - Диаграммы классов (class diagrams) - Диаграммы потоков (flowcharts) - Диаграммы Ганта (gantt charts) - ER-диаграммы (entity-relationship diagrams)

Все диаграммы будут автоматически стилизованы в соответствии с темой Catppuccin Mocha.