英文:
Mermaid ER diagram styling
问题
我想用Mermaid绘制一个ER图表。但我找不到如何为框设置不同颜色的方法。
我知道可以设置主题颜色,但我无法为每个框都这样做。我尝试了不同的语法并在官方文档中找到了一些信息,但我无法弄清楚如何使用它们。官方文档
我想要做成这样:示例
英文:
I want to draw an ER diagram with Mermaid. But I can't find out how to style the box to make it with different colors.
I know it's possible to set the theme color, but I can't do it to each box. I've tried different syntaxes and found some information on the offical documentation, but I can't figure out how to use them.official docs
I want to make it like this:example
答案1
得分: 0
Mermaid语法目前不支持为ER图使用自定义颜色,除非使用自定义CSS。
关于这个问题有一个开放的问题,这个评论提供了一个解决方案,当你可以控制图表源和主题的CSS时可以使用:https://github.com/mermaid-js/mermaid/issues/2673#issuecomment-1522470695
英文:
The Mermaid syntax does not currently support custom colors for ER diagrams without custom CSS.
There's an open issue about this, and this comment provides a solution when you can control the diagram source and the CSS for the theme: https://github.com/mermaid-js/mermaid/issues/2673#issuecomment-1522470695
答案2
得分: 0
以下是翻译好的部分:
这里是一个示例 (Mermaid Live 链接)
请注意,在实时链接中,我将init直接放在代码中而不是配置中。这是因为如果我想将其复制到其他地方,这样做会更容易。
%%{init: {
"theme": "default",
"themeCSS": [
".er.relationshipLabel { fill: black; }",
".er.relationshipLabelBox { fill: white; }",
".er.entityBox { fill: lightgray; }",
"[id^=entity-some] .er.entityBox { fill: lightgreen;} ",
"[id^=entity-mytable] .er.entityBox { fill: powderblue;} ",
"[id^=entity-anothertable] .er.entityBox { fill: pink;} "
]
}}%%
前三个设置设置了默认的CSS样式,后三个是针对使用模式的表格特定的样式。
请注意,在Mermaid Live以及其他一些实现中,您需要在表格名称/模式前加上"entity-"前缀,但在其他一些实现中(例如Gitlab),您需要删除该前缀才能使其正常工作。
英文:
Here is an example (Mermaid Live link)
Note, that in the live link, I put the init directly in the code rather than the config. This is because it makes it easier if I want to copy it somewhere else.
%%{init: {
"theme": "default",
"themeCSS": [
".er.relationshipLabel { fill: black; }",
".er.relationshipLabelBox { fill: white; }",
".er.entityBox { fill: lightgray; }",
"[id^=entity-some] .er.entityBox { fill: lightgreen;} ",
"[id^=entity-mytable] .er.entityBox { fill: powderblue;} ",
"[id^=entity-anothertable] .er.entityBox { fill: pink;} "
]
}}%%
The first three settings set the default css, the last three are specific to a table using a pattern.
Note that when testing in Mermaid Live and maybe some other implementations, you need to prefix the table name/pattern with entity-
, but in some other implementations (e.g. Gitlab), you would need to remove that prefix to get it to work.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论