Mermaid js 流程图 - 用于设置节点样式的可用选项的完整列表

Question

美人鱼声明文档中是否有一些可用选项的完整列表的文档：https: //mermaid.js.org/syntax/flowchart.html#styling-a-node和https://mermaid.js.org/语法/流程图.html#样式和类？

美人鱼文档中给出的示例：

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}？

Answer 1

mermaid.js 官方指南第 170-171 页中的这段文字可能会有所帮助：

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

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

（对我来说）查看CSS可用内容的最简单方法是使用浏览器检查它们：

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

让我们以一个示例为例。

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

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

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

希望这有帮助。