Discourse Mermaid

| |
|-|-|-|
|:discourse2: | Краткое описание | Discourse Mermaid позволяет создавать очень мощные диаграммы, используя синтаксис Mermaid.
| :eyeglasses: | Предпросмотр | Предпросмотр в конструкторе тем Discourse
|:hammer_and_wrench: | Ссылка на репозиторий | https://github.com/discourse/discourse-mermaid-theme-component
|:open_book: |Новичок в темах Discourse? | Руководство для начинающих по использованию тем Discourse

Установить этот компонент темы

Использование

```mermaid height=200
graph TD;
  A --> B;
```

Узнайте больше о синтаксисе Mermaid на официальном сайте: Mermaid | Diagramming and charting tool

:warning: Диаграммы не будут отображаться в письмах

Настройки

Имя Описание
svg icons
Перевод По умолчанию
rendering_error

<b>Ошибка</b><p>Пожалуйста, убедитесь, что ваш код Mermaid работает на <a href=‘https://mermaid.live/’>mermaid.live</a> и отступлен с помощью 4 пробелов, например: <pre><code> flowchart TB
A → B</code></pre></p>

insert_mermaid_sample Диаграмма Mermaid

:discourse2: Размещено нами? Компоненты тем доступны для использования на наших тарифах Pro, Business и Enterprise.

31 лайк

Иконка не отображается на диаграмме, когда вы используете fontawesome:

У меня не получилось при тестировании с этим:

flowchart LR
    A>fas:fa-plane-departure Airline] -->|11/04/2024| B

Но это работает, если вы протестируете здесь:

Здесь опубликован запрос на новую функцию:

3 лайка

3 сообщения были перенесены в новую тему: Обновление Mermaid до версии 10.6.1

Возможно ли генерировать SVG вместо PNG?

Привет, добро пожаловать :wave:

Это не генерирует изображение. Это отображает SVG-элемент HTML. Если вы посмотрите на пример в первом сообщении, он предназначен для того, чтобы быть скриншотом результата. Понимаю, что это может сбивать с толку. Вы можете увидеть живой пример ниже:

graph TD;
  A --> B;
3 лайка

2 сообщения были объединены с существующей темой: Проблема масштабирования для диаграмм

Привет!
Не подскажите, есть ли способ воспроизвести «черновой» стиль, который можно увидеть в предпросмотре Mermaid (в правом верхнем углу):
CleanShot 2025-03-04 at 14.11.16

Думаю, шансы невелики, так как код на самом деле не меняется, но попробовать стоит!

2 лайка

Масштабирование в Firefox работает странно, и я не могу приблизить диаграмму с большой высотой.

Вот как это выглядит в посте:

Скриншот поста

Вот как это выглядит при раскрытии (клик ничего не делает, но если диаграмма расположена слева направо, то я могу кликнуть для масштабирования):

Скриншот раскрытого вида

Диаграмма Mermaid из примера:

Диаграмма
flowchart TD
    A["Lorem ipsum dolor"] --> B["Sit amet consectetur"]
    A --> C["Adipiscing elit sed"]
    B --> E["Do eiusmod tempor"]
    C --> D["Incididunt ut labore"]
    D --> F["Et dolore magna"]
    E --> G["Aliqua ut enim"]
    F --> G
    G --> H["Ad minim veniam"]
    H --> I["Quis nostrud exercitation"]
    C --> J["Ullamco laboris nisi"]
    I --> K["Ut aliquip ex"]
    J --> L["Ea commodo consequat"]
    L --> M["Duis aute irure"]
    M --> N["Dolor in reprehenderit"]
    N --> O["In voluptate velit"]
    K --> P["Esse cillum dolore"]
    P --> Q["Eu fugiat nulla"]
    Q --> R["Pariatur excepteur sint"]
    L --> S["Occaecat cupidatat non"]
    F --> T["Proident sunt in"]
    S --> U["Culpa qui officia"]
    U --> V["Deserunt mollit anim"]
    R --> W["Id est laborum"]
    W --> X["Sed ut perspiciatis"]
    O --> Y["Unde omnis iste"]
    X --> Z["Natus error sit"]
    Z --> AA["Voluptatem accusantium doloremque"]
    AA --> AB["Laudantium totam rem"]
    AB --> AC["Aperiam eaque ipsa"]
    AC --> AD["Quae ab illo"]
    T --> Y
    V --> Q
    D --> M
    E --> R

В Chrome это работает лучше.

Mermaid also places errors at the end of the <body> tag of discourse

1 лайк

пост изначально был написан на русском

Хм. Он был на английском, за исключением имени изображения. Спасибо, Discourse.

То, что я на самом деле написал:

Mermaid также помещает ошибки в конец тега <body> на Discourse

У меня тоже появляется это сообщение после отправки изменений, но если обновить страницу, ошибка исчезает. На мой взгляд, это не нарушает функциональность, но определённо портит в целом отличный опыт использования.

Поддерживается ли сейчас click в диаграммах Mermaid?

flowchart TD
   start --> relative
   relative --> absolute
   absolute --> external

   click relative "/categories" "tooltip1"
   click absolute "https://meta.discourse.org/docs" "tooltip2"
   click external "https://github.com/" "tooltip3"

Я вижу, что ссылка создаётся в исходном коде страницы, но она не работает.

Какая версия Mermaid поддерживается этим компонентом?

2 лайка

Какой обычно график обновлений для Discourse Mermaid в отношении базовой библиотеки mermaid.js? Я спрашиваю, потому что начиная с версии 11.14 включён новый тип диаграмм Wardley Mapping (в бета-версии), который представляет значительный интерес для моих сообществ.

На момент написания последняя версия — 11.15.0, и, по сообщениям, функция Wardley теперь достаточно стабильна.

Если PR будет принят, я с радостью подготовлю его!

2 лайка

Вклад в виде PR действительно приветствуется!

1 лайк