Mermaid -自定义CSS和Markdown脚本

iqxoj9l9  于 2023-04-08  发布在  其他
关注(0)|答案(2)|浏览(232)

tl;dr对于Github上的Markdown页面,如何为美人鱼图指定样式表和源脚本?
我在看mermaid的流程图文档,发现了很多很酷的功能,比如可以指定callback。然而,我很难弄清楚在Markdown中如何做到这一点。
我已经弄清楚了如何从this question更改主题,并且正在使用inline classDef进行文档中解释的样式,但仍然不确定如何使用自定义样式表并定义不仅仅是超链接的回调。

7uzetpgm

7uzetpgm1#

你可能做不到。
GitHub strips most styling out of its README files .如果有一个特殊的情况允许自定义美人鱼图的样式,我会非常惊讶。

vlurs2pr

vlurs2pr2#

Mermaid的语法允许您在Mermaid内容中使用内联指令,该指令指导它应该如何呈现。您可以向它传递与init()相同的参数,例如序列图的示例。
我用下面的代码做了一个快速测试,它似乎有效:

I am in a Markdown file and I want to show you a diagram:

```mermaid
%%{
  init: {
    "sequence": {
      "actorFontFamily": "monospace",
      "actorFontWeight": "bold",
      "messageFontFamily": "monospace",
      "messageFontWeight": "bold",
      "noteFontWeight": "bolder"
    }
  }
}%%

sequenceDiagram
  autonumber
  participant Browser
  participant AppServer

  rect rgb(255, 255, 255, 0.05)
    note over Browser, AppServer: (Phase 1) Authentication Check

    Browser ->> AppServer: GET /admin { Cookie:  }
    Browser ->> Browser: useSession
  end
end

更改字体大小等内容并不总是会导致明显的变化(我认为SVG必须缩放到浏览器中的可用大小),但您可以尝试更改“主题”以验证指令正在处理。

相关问题