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

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

Retiago Drago (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)

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

快乐绘图! 📊✨