问题标签 [mermaid]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
css - Typora,更改图形美人鱼中链接上的文本字体
我想更改链接(Change_font)上文本的字体(颜色,大小...),但我无法弄清楚。有人可以帮忙吗?? 流程图
mermaid - 如何生成包含每个节点的标题和描述的美人鱼流程图
我正在研究 ROS 机器人。我想用美人鱼记录启动文件。这些 xml 文件中的某些内容最适合同一节点,例如:
- 姓名
- 类型
- 描述
- ...
将它们添加为单独的节点会使图表真的不可读,那么我将如何生成包含这些信息的节点?
markdown - 如何更改美人鱼序列图中一个元素的颜色?
我正在使用Mermaid在 Markdown中创建序列图。我想突出显示一些参与者并将一些箭头变灰。
我只看到如何更改主题颜色,而不是如何更改特定图表元素的颜色。可能吗?
markdown - Mermaid 中的全局或文档范围的样式
我有一个文档,我在其中创建了许多流程图,这些流程图共享其项目的样式和颜色的共同图例。例如:
现在,我需要将这些classDef
s 添加到我制作的每个流程图中。复制和粘贴它们并不是世界末日,但是当你有二十个流程图让它们都使用相同的样式定义时,它并不是最好的。
有没有办法指定classDef
在同一类型的所有图表之间共享的每个文档的 s 或样式集?
azure-devops - Azure DevOps Wiki 支持哪个版本的美人鱼
AzureDevOps 当前支持哪个版本的美人鱼。在官方文档中,它只提到了一些支持的图表。
我真的浪费了很多时间,因为我使用了 Azure DevOps 不支持的功能。
我现在从 8.2.6 开始使用功能,但我想确定支持哪个版本。
谢谢
gantt-chart - 甘特图未显示正确日期
我想显示一个简单的甘特图。日期显示不正确。
如您所见,task_1 从 10h25 开始,这是不正确的。它应该在 11:44:09 显示。当我删除 wole dateFormat 它确实有效,但这是为什么呢?
另外,我怎样才能将时间加起来:5 小时 15 分 8 秒。而不是10m的确切时间?
c# - 在 .NET 5.0 中使用 Blazor WebAssembly 应用程序渲染美人鱼图
我已按照此处的指南进行Deploying Mermaid
操作:
https://mermaid-js.github.io/mermaid/#/?id=deploying-mermaid
在 codepen 上使用它可以直接工作:
https://codepen.io/Ogglas/pen/MWjWNxR
为了在 Blazor 中启用它,我编辑了 BlazorApp.Client -> wwwroot -> index.html 并在下面添加了以下内容<script src="_framework/blazor.webassembly.js"></script>
。
Index.razor
然后我使用以下值进行编辑:
但是,这不会呈现美人鱼图。我究竟做错了什么?
visual-studio-code - 在 VSCode 上更改美人鱼主题预览
我使用美人鱼在基本降价文档中制作图表,我想将默认主题更改为中性主题。我使用 VSCode 和 Markdown 增强预览扩展。我试图更改 mermaid_config.js 文件添加"theme": "neutral"
. 不工作。
javascript - 如何动态设置以编程方式生成的 SVG 样式?
我正在使用 js 库(美人鱼)在网页上生成 svg。当用户使用键盘快捷键激活各种命令时,我需要动态地将样式应用于 svg 的某些部分,特别是,我需要突出显示 svg 中当前在逻辑模型中指定为选定元素的元素。查看有关动态样式化 svg 处理内联静态 svg 的其他问题,因此它们可能不适用于我的案例,并且到目前为止我尝试的方法都没有奏效。
我尝试应用的样式是
border-radius : 2rem; box-shadow : 0 0 3rem red;
在应用于常规 html 时,这会给元素一个发光的红色边框。
我尝试的第一件事是将它作为一个类包含在这样的元素中:
将类添加到常规 html 元素的类列表中,例如 , 或
,将产生所需的样式。但是,当我以编程方式获取一个元素并将该类添加到其类列表中时,它将保持没有发光边框。使用 chrome 开发工具检查 svg 发现相关类已添加到元素的类列表中。对常规 html 使用相同的方法是成功的。这里是我用来添加类的方法供参考:
graphicDiv.querySelector(selector).classList.add('highlight')
这失败了,我想也许 svg 在其内部元素中有一些样式覆盖了我的样式,所以我添加了 !important 到我的样式中,这样它们将具有最高优先级。这仍然失败,所以接下来我尝试为元素设置样式属性,它应该具有最高优先级,如下所示:
graphicDiv.querySelector(selector).setAttribute('style', 'border-radius : 2rem !important; box-shadow : 0 0 3rem red !important;')
这仍然未能在 svg 的样式上产生任何差异。检查 chrome 开发工具中的元素显示确实设置了样式属性。
我还尝试将我的样式定义添加到 svg 自己的元素中,方法是在生成 svg 后获取它,并将我的类样式定义附加到其文本内容中。它仍然行不通。
最后,我认为这些 css 属性可能不受background-color: green;
. 这没有用。我尝试应用于 svg 中的元素。也没有用。
我完全困惑为什么这些都不起作用。如果有人能帮助我了解如何动态更改 svg 元素的样式,我将不胜感激!
javascript - 如何动态渲染美人鱼流程图?
我正在使用美人鱼库来构建流程图。其工作原理是在块内有一个伪代码 - 特殊语法的命令,在此基础上在块中构建流程图。
我希望能够动态更改块的内容,并且脚本每次都重建块图。
我应该如何设置初始化?也许我应该在设置中添加一些回调函数?
我是这样初始化的:
但该脚本不会呈现任何新命令。它只呈现文档加载时存在的命令。
换句话说,我想在线编辑流程图。