Discourse美人鱼

主题组件
,
1

|||
-|-|-|
: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 diagram example
mermaid diagram example1396×642 30.9 KB

在官方网站上了解更多关于 Mermaid 语法的信息：Mermaid | Diagramming and charting tool

:warning: 图表不会在电子邮件中渲染

设置

名称 描述
svg icons
翻译 默认
rendering_error 错误

请确保您的 mermaid 代码在 mermaid.live 上运行，并缩进 4 个空格，例如：

    flowchart TB
    A --> B

insert_mermaid_sample Mermaid 图表

:discourse2: 由我们托管？ 主题组件可用于我们的 Pro、Business 和 Enterprise 套餐。

30 个赞
37

当您使用 Font Awesome 时，图表不显示图标：

我在测试此内容时失败了：

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

但如果您在此处测试，则可以正常工作：

39

这里发布了一个功能请求：

3 个赞
41

3 个帖子被拆分到一个新主题：Upgrade Mermaid to 10.6.1

42

是否可以生成 SVG 而不是 PNG？

43

您好，欢迎 :wave:

这不会生成图像。它会渲染一个 SVG HTML 元素。如果您参考第一篇帖子中的示例，它应该是一个结果的截图。我明白这可能会令人困惑。您可以在下方看到一个实时示例：

graph TD;
  A --> B;
3 个赞
44

2 篇帖子已合并到现有主题：图表缩放问题

45

你好，

有没有办法模仿 Mermaid 预览器（右上角）中可以找到的“粗糙”样式？
CleanShot 2025-03-04 at 14.11.16

我猜机会渺茫，因为代码实际上并没有改变，但值得一试！

2 个赞
46

在 Firefox 中缩放效果奇怪，并且我无法在高度很大的图表中进行缩放。

在帖子中的样子：

帖子截图

Снимок экрана от 2025-04-18 10-14-10
Снимок экрана от 2025-04-18 10-14-10945×592 17.8 KB

展开后的样子（点击无效，但如果图表是 LR，则可以点击进行缩放）：

展开后的截图

Снимок экрана от 2025-04-18 10-15-50
Снимок экрана от 2025-04-18 10-15-502130×1307 93.4 KB

示例中的 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 中效果更好。

47

Mermaid 还会将错误放在 discourse 的 <body/> 标签的末尾

Снимок экрана от 2025-04-19 02-12-51
Снимок экрана от 2025-04-19 02-12-51865×518 43.5 KB

1 个赞
48

此帖子最初是用 Русский 写的

嗯。除了图片名称，它原本是英文的。谢谢，discourse。

我实际写的是：

Mermaid 还在 discourse 的 <body> 标签末尾放置了错误

49

提交更改后我也遇到了这个问题，但如果我刷新页面，错误就会消失。我认为这不会破坏功能，但肯定会破坏原本很棒的体验。