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

Question

我正在使用 Mermaid 在 Markdown 中创建序列图。我想突出显示一些 participants 并使一些箭头变灰。

那怎么办？

Answer 1

看一下美人鱼的文档，里面也有一段是关于各个节点的样式的：

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

我希望这就是你要找的。

Answer 2

如今，无法设计序列图的样式。他们的 bugtracker 中有一个 open issue。单击链接并为其投票:-)

您可以设计其他类型的图表，如@lutz-dieckhofer 所回答。

Answer 3

这是可能的，但有点 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 个类型数字进行了一些处理。 箭头都必须是相同的颜色。 如果您之后编辑代码，您可能需要重新对齐所有颜色。