事情是这样的

在画工作流, 用的mermaid, 对于一些特殊的路径, 例如 "打回重做!!!"这样的路径, 希望在路径图上标示为醒目的红色

graph LR
start[发起采购]:::runnode --> internalCheck
internalCheck[内部审核]:::rannode --> |APPROVED|quotation
internalCheck[内部审核]:::rannode --> start
quotation[提供报价] --> |pending 3d|closed
quotation[提供报价] --> |>3d|selectSupplier
quotation[提供报价] --> |DONE|selectSupplier
selectSupplier[选择供应商] --> createTasks
createTasks[建立工单] --> finishJob
finishJob[提交任务] --> audit
audit[任务结果review] --> |APPROVED|deliver
audit[任务结果review] --> |!APPROVED|finishJob
deliver[交付]
closed[废标]
classDef donenode fill:#59C36A,stroke:#dedede,stroke-width:1px;
classDef runnode fill:#FFE28F,stroke:#dedede,stroke-width:1px;
classDef rannode fill:#efe2eb,stroke:#dedede,stroke-width:1px;
linkStyle 2 stroke:red,color:red;
linkStyle 10 stroke:red,color:red;

很明显,红线黑箭头,看着不舒服. 上图的代码是这样:

graph LR
start[发起采购]:::runnode --> internalCheck
internalCheck[内部审核]:::rannode --> |APPROVED|quotation
internalCheck[内部审核]:::rannode --> start
quotation[提供报价] --> |pending 3d|closed
quotation[提供报价] --> |>3d|selectSupplier
quotation[提供报价] --> |DONE|selectSupplier
selectSupplier[选择供应商] --> createTasks
createTasks[建立工单] --> finishJob
finishJob[提交任务] --> audit
audit[任务结果review] --> |APPROVED|deliver
audit[任务结果review] --> |!APPROVED|finishJob
deliver[交付]
closed[废标]
classDef donenode fill:#59C36A,stroke:#dedede,stroke-width:1px;
classDef runnode fill:#FFE28F,stroke:#dedede,stroke-width:1px;
classDef rannode fill:#efe2eb,stroke:#dedede,stroke-width:1px;
linkStyle 2 stroke:red,color:red;
linkStyle 10 stroke:red,color:red;

于是在互联网寻找

有些提到箭头颜色问题的, 是用 linkStyle default 来实现, 这个很明显, 不是本场景要处理的情况, 它是改所有的箭头.

真的不能单独设置吗?

是的, 至少我现在用的这个版本是不行. 原因是这样:

1. mermaid使用SVG来绘制整个图像

   

2. 可以看到里面主要是两个部分: style 和 g. 图形是在g里绘制的. 至于本问题说的箭头, 是在 <g class="edgePaths">... 中.

   我们可以把这部分展开来看一下:

   

可以看到, 在连接线的端点, 是通过 marker-ref 来绘制箭头的. (参考 这里)

marker-ref只有一个值, 没有其他属性, 也就是说, 如果要有不同的箭头, 就要有不同的marker先被定义出来, 然后不同的edgePath引用不同的marker.

我想这个就是为什么不能设置单独箭头的原因: 在实现上, 这里使用了同一个marker-ref.

那为什么线条颜色可以单独指定?

因为线条是独立的存在, 有自己的style.