在Mermaid Markdown中使用linkStyle为箭头/链接上色

(opens new window)

欢迎回到Technically Speaking，这是您深入了解技术迷宫奇妙之处的圣地。今天，我们将聚焦于Mermaid (opens new window)，这是一个令人惊叹的工具，已经成为我在绘制和记录图表时的首选。具体来说，我们将在Mermaid Markdown流程图中给箭头或链接添加一些色彩。让我们开始吧！

设置舞台

首先，我们需要一个基本的流程图或图表来进行操作。这是我即将发布的有关隐写术的文章中的一部分，展示了我使用Mermaid Markdown构建的流程图：

graph TB
    Decode([Decod ```Chinese
    End([结束])
    ULhbCover[/"未合并的左半位隐秘图像封面"/]
    CULhbHidden[/"封面图像大小的未合并的左半位隐秘图像"/]
    ULhbHidden[/"未合并的左半位隐秘图像"/]
    Merged[/合并后的图像/]
    Lhb[LHB映射]
    Rhb[RHB映射]

    Decode --> Merged
    Merged --> Lhb & Rhb
    Lhb --> ULhbCover
    Rhb --> CULhbHidden
    CULhbHidden --"在合并图像中传递隐秘图像位置"--> ULhbHidden
    ULhbCover & ULhbHidden --> End

进入全屏模式 退出全屏模式

链接样式的艺术

当我第一次遇到Mermaid文档中关于链接样式的部分 (opens new window)时，看起来很简单。只需要使用这一行代码：

linkStyle default stroke:green;

default参数适用于图表中的所有链接或箭头的样式。然而，有一个小问题： 以下是将上述Markdown翻译为中文并删除一级标题的结果：文档没有明确说明在哪里放置这个神秘的一行代码。起初，我遇到了一些让我困惑的错误。然后，恍然大悟！我意识到将样式指令放在所有链接语法之后，就像这样：

graph TB
    Decode([解码])
    End([结束])
    ULhbCover[/"未合并的左半部分
    位覆盖图像"/]
    CULhbHidden[/"覆盖图像大小的未合并左半部分
    位隐藏图像"/]
    ULhbHidden[/"未合并的左半部分
    位隐藏图像"/]
    Merged[/合并图像/]
    Lhb[LHB映射]
    Rhb[RHB映射]

    Decode --> Merged
    Merged --> Lhb & Rhb
    Lhb --> ULhbCover
    Rhb --> CULhbHidden
    CULhbHidden --"在合并图像中传递隐藏图像
    位置"--> ULhbHidden
    ULhbCover & ULhbHidden --> End

    linkStyle default stroke:green;

就是这样，它奏效了！欣赏绿色的描边吧：

[![Decode mermaid graph](https://res.cloudinary.com/practicaldev/image/fe ## 未知领域

还有一些细微之处我尚未掌握。其中一个是给箭头本身上色；我曾向 BingChat 寻求解决方案，但它涉及复杂的 CSS，这对于以 Markdown 为中心的努力来说是行不通的。其次，我一直在寻找对比鲜明的背景。暗模式是我的最爱，但不幸的是，Mermaid 的 PNG 输出与之不兼容。我尝试设置一个固定的背景颜色，但目前为止还没有成功。你可以在这里实时尝试一下：点击这里 (opens new window)。

所以，现在你的链接拥有了引人注目的描边，尽管完美样式的追求仍在进行中。 如果您对神秘的箭头着色或背景对比有任何见解，请分享！在那之前，请继续探索，继续质疑，最重要的是，保持"技术说话"。

快乐绘图！ 📊✨