一个美人鱼序列图中一个元素的颜色如何改变？

Question

我正在使用Mermaid在Markdown中创建一个序列图。我想要突出一些参与者并将一些箭头变灰。

这该怎么做呢？

- neves

---

请查看Mermaid文档，其中还有关于单个节点样式的段落：https://mermaid-js.github.io/mermaid/#/flowchart?id=styling-and-classes 希望这是您所寻找的内容。 - undefined

以上链接已经移动到https://mermaid.js.org/syntax/flowchart.html#styling-and-classes。 - undefined

Answer 1

现在，无法为序列图设置样式。在他们的错误跟踪器中有一个未解决的问题。请单击链接并投票支持它 :-)

正如@lutz-dieckhofer所回答的那样，您可以为其他类型的图表设置样式。

- neves

Answer 2

这是可能的，但有点hack-y。 这在https://mermaid.live中确实有效。 只需复制并粘贴此代码即可。

sequenceDiagram
Fred->>Jill:Hello my Snookums
note over Fred:True Love
Jill->>Fred:Oh my Darling!
note over Jill:True Love Returned

%%{init:{'theme':'forest'}}%%
%%{init:{'themeCSS':'.messageLine0:nth-of-type(2) { stroke: red; };.messageText:nth-of-type(1) { fill: green; font-size: 30px !important;}; g:nth-of-type(3) rect.actor { stroke:blue;fill: pink; }; g:nth-of-type(5) .note { stroke:blue;fill: crimson; };#arrowhead path {stroke: blue; fill:red;};'}}%%
 

秘密在于themeCSS，以及nth-of-type来选择特定的行。 下一行也非常丑陋，因为它们都必须适应JSON单个值。 这只是CSS，但是获取特定类和元素等方面有点棘手。

.messageLine0:nth-of-type(2) { stroke: red; };
.messageText:nth-of-type(1) { fill: green; font-size: 30px !important;}
g:nth-of-type(3) rect.actor { stroke:#00f;fill: pink; };
g:nth-of-type(5) .note { stroke:blue;fill: crimson; };
#arrowhead path {stroke: blue; fill:#f00;};

选择特定行相对容易。 处理注释（.note）和参与者（rect.actor）需要一些关于第n个类型数字的工作。 所有箭头都必须是相同的颜色。 如果您在之后编辑代码，可能需要重新对齐所有颜色。

- Rob Angelo

---

这个有效，谢谢！ - calbertts

Answer 3

请查看Mermaid文档，其中还有一段关于单个节点样式的内容：

https://mermaid-js.github.io/mermaid/#/flowchart?id=styling-and-classes

我希望这是你要找的内容。

- Lutz Dieckhöfer

---

我相信这个链接更好用：https://mermaid.js.org/syntax/flowchart.html#styling-and-classes - David Soroko