在Mermaid Markdown中使用linkStyle
为箭头/链接上色
欢迎回到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)。
所以,现在你的链接拥有了引人注目的描边,尽管完美样式的追求仍在进行中。 如果您对神秘的箭头着色或背景对比有任何见解,请分享!在那之前,请继续探索,继续质疑,最重要的是,保持"技术说话"。
快乐绘图! 📊✨