Блог

Я использую Mermaid для создания диаграммы последовательности в Markdown. Я хотел бы выделить некоторых участников и выделить серым цветом некоторые стрелки.

Как это можно сделать?

Взгляните на документацию Mermaid, там также есть параграф о стилизации отдельных узлов:

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

Я надеюсь, что это то, что вы ищете.

В настоящее время невозможно стилизовать диаграммы последовательности. В их багтрекере есть открытая проблема. Нажмите на ссылку и проголосуйте за нее 🙂

Вы можете создавать другие типы диаграмм, как ответил @lutz-dieckhofer.

Это возможно, но немного халтурно. Это работает в 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-м номером типа справа.
Все наконечники стрелок должны быть одного цвета.
Если вы отредактируете код после, вам, возможно, придется снова выровнять все цвета.