[ANN] Nervos Talk now supports Mermaid diagrams

论坛现在支持直接在帖子里绘制 Mermaid 图表,同时 Babel Reunited 翻译插件完成了一次重要的渲染底层修复。

这个功能来自社区的建议和分析:@ArthurZhangForum tooling suggestion: Mermaid diagram support for technical posts 中提出了需求、找到了官方组件,并精准定位了它与翻译插件的兼容性问题;@phroi 的持续测试反馈帮我们把渲染问题的根因挖了出来。感谢两位。

现在可以这样画图:

在帖子里写 ```mermaid 代码块即可,发布后自动渲染成图形。比如流程图:

flowchart LR
    A[Write a mermaid block] --> B[Post it]
    B --> C[Rendered as SVG]
    C --> D[Fullscreen on hover]

时序图等其他图表类型也支持:

sequenceDiagram
    participant U as Author
    participant F as Forum
    participant T as Translator
    U->>F: Post with a diagram
    F->>T: Translate the prose
    Note over T: Diagram source is protected
    T-->>F: Translated text
    F-->>U: Same diagram, translated prose

语法参考见 Mermaid 官方文档。编辑器预览里就能实时看到渲染效果。

几点说明:

  • 鼠标悬停在图上有全屏按钮;语法写错不会破坏页面,只会显示一个错误提示框。
  • 这次一起上线的还有渲染底层修复:帖子正文现在完整经过 Discourse 核心的渲染管线,之前在启用翻译的分类里失效的功能都恢复了——代码块右上角的复制/全屏按钮、图片点击放大等——并且在翻译视图里同样生效。切换本帖顶部的语言标签就能验证:译文里的图表照样渲染。
  • 图表里的文字保持原文不翻译。这是刻意的取舍:图表源码对结构敏感,让模型去翻标签很容易把图改坏,宁可不翻,不可翻坏。

欢迎大家试用.

9 Likes

Hi Terry, 目前置顶的消息似乎只能显示原始语言(比如这一条就是中文,没有AI翻译功能)

3 Likes

感谢反馈,我理解是 banner 没有被正确的翻译对吧?

会包含在下一个 release 中

4 Likes

Well Done