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

Question

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

我只看到如何更改主题颜色，而不是如何更改特定图表元素的颜色。是否可以？

Answer 1

如今，无法设计序列图的样式。他们的 bugtracker 中有一个未解决的问题。单击链接并投票:-)

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

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 和选择特定行的第 n 个类型。下一行也非常难看，因为它们都必须适合 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 个类型数字进行一些处理。所有箭头都必须是相同的颜色。如果您之后编辑代码，则可能需要再次重新对齐所有颜色。