Mermaid js 流程图 - 节点样式的完整选项列表

Question

在mermaid语句文档中，是否有完整选项列表的文档可供参考：https://mermaid.js.org/syntax/flowchart.html#styling-a-node 和 https://mermaid.js.org/syntax/flowchart.html#styling-and-classes？

mermaid文档中提供了以下示例：

flowchart LR
    id1(Start)-->id2(Stop)
    style id1 fill:#f9f,stroke:#333,stroke-width:4px
    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5

显示填充、描边、描边宽度等，但不接受字体大小或其他我尝试过的 CSS 样式。

是否有一个完整的列表，列出了可以跟随 style {nodeId} 的所有内容？

- NULL pointer

Answer 1

这段来自于第170-171页，mermaid.js官方指南的内容可能会有所帮助：

“节点样式的语法以style关键字开头，看起来像是style ID CSS。在这里，我们有以下内容：
style： 这是样式关键字。
ID：这是要设置样式的节点ID。
CSS：这是要应用于样式的CSS代码。 请记住，Mermaid生成SVG代码，这意味着CSS样式应该适用于SVG元素，例如填充和描边。

我认为这意味着CSS样式取决于您的图表具有哪些元素，而不是您可以使用的参数的完整列表（从技术上讲，只要您拥有使用这些参数的节点或线条，就可以使用）。

对我来说，最简单的查看可用的CSS的方法是使用浏览器进行检查：

1. 在Mermaid Live Editor中打开示例流程图

我们以一个示例为例。

2. 在Chrome（或其他）浏览器中打开svg以在新选项卡中查看

3. 在新标签页中右键单击图表，选择“检查元素”

展开 标签，您将看到所有 CSS 参数，包括用于此 SVG 图表的字体大小：

希望这对您有所帮助。

- Grasshopper_NZ

---

这很有帮助，因为我没有意识到我正在为SVG元素设置样式 - 我以为我可以使用任何CSS，但我将尝试仅使用可用于样式化SVG元素的CSS。我现在已经离开了这个流程图 - 所以我现在无法检查。 - NULL pointer