如何在美人鱼节点描述中添加链接?

2024-05-14

我想,如下图所示,

<link href="https://cdnjs.cloudflare.com/ajax/libs/mermaid/7.0.0/mermaid.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/7.0.0/mermaid.js"></script>
<div class="mermaid">
  graph TD; 
  A[hello] 
  B[an <b>important</b> link] 
  A-->B
</div>

在下面添加实际链接link指向http://google.com.

我尝试将相关节点修改为

B[an <b>important</b> <a href="http://google.com">link</a>] 

但这会破坏(崩溃)图表。具体来说,我注意到不被接受的是href元素。

是否可以在美人鱼节点描述中添加链接?

编辑:我打开了一个错误报告 https://github.com/knsv/mermaid/issues/467在 mermaid.js 存储库上。截至 2017 年 6 月尚未修复。


我知道已经晚了但是:我正在寻找类似的东西并发现了这个。你的问题是" of the href定义打破了美人鱼语法。

我可以通过使用来实现你想做的事情

B[an <b>important</b> <a href='http://google.com'>link</a>]

所以替换双引号" of the href单一的定义'

See 这里的例子 https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiZ3JhcGggVERcbiAgICBBW1RoaXMgaXMgYW4gPGI-aW1wb3J0YW50PC9iPiA8YSBocmVmPSdodHRwczovL2dvb2dsZS5jb20nPmxpbms8L2E-XVxuIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifX0.


一年后更新

在新版本的 mermaid 中,不再直接支持开箱即用(ಠ_ಠ)

更多相关信息请参见版本 8.2.0 变更日志 https://mermaid-js.github.io/mermaid/#/CHANGELOG?id=_820-2019-07-17

现在您还需要通过以下方式额外允许不安全的内容

mermaidAPI.initialize({
    securityLevel: 'loose'
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在美人鱼节点描述中添加链接? 的相关文章

  • 如何将 blob 文件附加到 HTML href="mailto:" 中

    我有一个可通过 URL 获取的文件 需要授权 我创建了一个 mailto 链接 并希望将此文件附加到邮件中 我怎样才能做到这一点 类似于 mailto 电子邮件受保护 cdn cgi l email protection attachmen
  • Javascript拆分正则表达式问题

    你好 我正在尝试我认为在 Javascript 中相当简单的正则表达式 但给我带来了很多麻烦 我希望能够通过 javascript 通过 和 分割日期 var date 02 25 2010 var myregexp2 new RegExp
  • 禁用小写字符下划线:g q p j y?

    有时您不希望下划线盲目地穿过带下划线的页面标题 有没有办法自动优雅地禁用强调对于某些小写字符 在这些情况下 最好不要在这些小写字母下划线 例如 g q p j y CSS h1 text decoration underline PAGE
  • nuxt如何访问javascript文件中的env

    我无法在 nuxt 2 15 之外访问我的环境变量 当我部署时我可以看到 nuxt context config在浏览器中有正确的变量 但在自定义js文件中我无法访问process env baseURL它返回未定义 nuxt config
  • 如何清除画布元素中的多边形区域?

    我使用过clearRect函数 但没有看到多边形的等效函数 我天真地尝试过 ctx fillStyle transparent ctx beginPath ctx moveTo 0 0 ctx lineTo 100 50 ctx lineT
  • 克隆元素对应表单中所有元素的事件

    我成功克隆了表行 其中包含从数据库检索的值 不过我对它没有什么问题 我对所有元素使用了类 因为克隆会重复 ID 不会出现问题 因为它无法唯一地定位每个元素 使每个元素 行在这里唯一的方法是什么 功能如何工作 当第一次选择框时 所选 ID 的
  • 如何在 Jquery Chosen 插件中搜索乌尔都语?还有其他方法在 Selectbox 中搜索乌尔都语吗?

    基本上我想在选择框中有搜索选项 并在选择框中选择实现的 jquery 所有选项均采用乌尔都语语言 如何扩展所选搜索以匹配乌尔都语 或者还有另一种方法在选择框中搜索乌尔都语 任何其他建议 提前致谢 有一种非常简单的方法可以将所有正则表达式逻辑
  • 异步 JS 加载到 head 中

    我需要将脚本异步加载到页面上 我正在使用createElement方法在头部动态插入脚本标签 发生的事情是首先加载页面源 完成后 头部中包含的所有元素都会并行加载 一旦全部加载完毕 我动态添加的脚本就会加载 这在逻辑上是有道理的 但我正在寻
  • Google App Script postMessage 与收件人窗口的来源不匹配

    我有一个 Google App 脚本部署为Web应用程序 https developers google com apps script guides web 它工作正常 直到今天晚上我发现它无法在 Firefox 或 Chrome 中加载
  • 根据用户的时间设置问候语(早上好,下午好......)

    任何人都可以推断如何根据用户的时间设置实现基本的 晚上好 或 早上好 也许 PHP 会获取服务器时间 但我希望用基于时间的适当问候语来问候网站访问者 并考虑到他们一天中的时间 E G 早上好 晚上好 下午好 基于它 getHours 日期对
  • React 功能组件:作为函数调用与作为组件调用

    假设我有一个功能组件 const Foo props gt div props name div 直接作为函数调用有什么区别 const fooParent gt div Foo name foo div 与将其称为组件相比 const f
  • 如何在jsp中使用javascript动态创建下拉框?

    我正在尝试动态创建下拉框 就像当我单击添加按钮时它必须创建新的下拉框 下拉列表还包含动态值 例如需要当前年份并且必须显示最多五年 请建议我这样做 谢谢 这是我尝试过的代码 JavaScript 代码 function Add var nam
  • Javascript for 循环跳过最后一个元素

    我有一个数组 根据某些条件从中删除某些元素 当我删除元素时 我会重新启动 for 循环 因为索引已刷新 var k for k 0 k lt this j data length k if condition true this j dat
  • 删除数组中所有对象的属性

    我想删除bad数组中每个对象的属性 有没有比使用更好的方法for循环并从每个对象中删除它 var array bad something good something bad something good something for var
  • Angular2,测试和解析数据:如何测试 ngOnInit?

    我正在通过Angular2 测试指南 https angular io docs ts latest guide testing html并希望编写一个测试ngOnInit 功能 那个来自编程指南的路由部分 https angular io
  • 如何使用 Soundcloud api 将流传输到 html5 音频播放器中?

    我刚刚开始学习 javascript 作为我的第一次尝试 我想创建自定义音频播放器 它使用 soundcloud 的 api 作为音乐源 到目前为止 这就是我的设置
  • 如何使用jquery点击眼睛图标时显示和隐藏密码

    我需要在单击眼睛图标时显示和隐藏用户密码 因此我为此编写了脚本 当我单击眼睛图标时 只有类正在更改 但密码不可见 再次单击斜线眼睛图标 它应该隐藏这两个图标方法不起作用如何解决这个问题
  • 如何运行 Mike Bostock 的 D3 示例?

    我一直在尝试经营迈克博斯托克透视地球仪 http bl ocks org mbostock 6747043例如 但是如果您尝试在本地重现它 则对其 json 文件的引用是不正确的 问题来自于这行代码 d3 json mbostock raw
  • Chrome + 另一个进程:进程间通信比 HTTP/XHR 请求更快?

    我有一个进程 1 对视频流进行实时图像处理 我需要在 Chrome 中的 HTML 页面中渲染该视频 同一台计算机上的进程 2 在canvas or img or videoHTML5 元素 由于我有 1000x1000 像素 x 3 字节
  • Fancybox修改。如何修改 fancybox 以停止在每个画廊的最后一项? (画廊 1 画廊 2 等)[重复]

    这个问题在这里已经有答案了 我正在为我的照片库使用 fancybox 插件 我有多个包含更多项目 照片 的画廊 我想知道如何在点击每个画廊的最后一个项目时停止幻灯片放映 我的 fancybox js 没有被修改 谢谢 您需要添加该选项loo

随机推荐

  • Ruby 中多维数组的帮助

    我有以下代码将字符串拆分为 3 个字节的组 str hello ix 0 iy 0 bytes tby str each byte do c if iy 3 iy 0 bytes ix tby each index do i bytes i
  • ApplicationController 的未定义方法“helper_method”,Rails 5

    我正在尝试使用doorkeeper 将oAuth2 0 集成到我的仅rails api 应用程序中 但我不断收到此错误 ApplicationController 的未定义方法 helper method 但无法找到解决该问题的明确解决方案
  • MVC和依赖注入,被迫使用单例Controller?

    我正在致力于构建一个根据 MVC 原则运行并利用依赖注入的 PHP 框架 我想我已经把前端控制器部分放下了 有一个工作路由器实例化控制器实例并根据请求的 URI 调用适当的操作 接下来是依赖注入 我想实现一个使用反射解决依赖关系的容器 这样
  • 增加 MS Teams 通道自适应卡的宽度

    我有一张带有 4 个按钮的自适应卡 但问题是我的第四个按钮转到了下一行 我想将所有按钮放在一行中 那么有什么方法可以增加自适应卡的宽度以将按钮对齐成一行 我正在使用机器人框架 v3 C 将以下属性添加到自适应卡以设置使用整个窗口的宽度 sc
  • 如何在iphone APP中下载facebook和Picasso的图片

    任何人告诉我有关 iphone 中从 facebook 和 picassa 下载图像的功能 我正在其中制作应用程序 我想制作通过我的应用程序从 picassa 和 facebook 下载选定图像的功能 那么我必须做什么 谢谢 查看NSURL
  • 数据库中的持久日期不等于检索日期

    我有一个具有 Date 属性的简单实体类 此属性对应于 MySQL 日期时间列 Entity public class Entity Column name start date Temporal TemporalType TIMESTAM
  • 预测测试图像时出现错误 - 无法重塑大小数组

    我正在尝试使用 TensorFlow 和 Keras 在 Python 中进行图像识别 并且我已经关注了下面的博客 https stackabuse com image recognition in python with tensorfl
  • clang 格式换行符在错误的位置

    给出以下代码行 get abc manager get platform status abc platform status sw update status fill update status actions allowed stat
  • python中将对象数据类型转换为字符串问题

    如何将对象数据类型结构转换为字符串数据类型 下面的方法不起作用 该列仍然存在object转换为字符串后 astype import pandas as pd df pd DataFrame country A B C D E df dtyp
  • 在 VS2017 下使用 Conan 和 CMake 项目进行依赖管理

    我正在尝试使用 CMake 与 VS2017 集成为 C 设置一个开发环境 以便在 Linux x64 下进行编译 为了更好地管理依赖关系 我选择使用 Conan 但我对这个软件还很陌生 我想知道让 VS2017 识别项目依赖关系的最佳方法
  • NSTable行点击事件

    我正在开发 Xamarin Mac 应用程序 目前正在创建新闻源列表 我想要的是 当用户单击其中一行时 我会执行一些操作 打开浏览器并显示完整的故事 这是我的自定义单元格 行 的样子 public class CustomLatestNew
  • 在 Google App Engine 中上传图像时出现 503 和 400

    最近 我在将文件上传到我的 Java gae 应用程序时遇到了两个问题 我正在使用中描述的技术Blob 存储文档 https developers google com appengine docs java blobstore overv
  • 类更改(例如字段添加或删除)是否保持 Serialized 的向后兼容性?

    我有一个关于 Java 序列化的问题 在这种情况下 您可能需要修改可序列化类并保持向后兼容性 我有丰富的 C 经验 所以请允许我将 Java 与 NET 进行比较 在我的Java场景中 我需要使用Java的运行时序列化机制序列化一个对象 并
  • 如何使用 zlib 制作 .zip 文件

    我正在阅读zlib的文档 它相当详细 但我读到了这一行 输出数据将位于zlib格式 与 gzip 或zip formats http www zlib net zlib how html http www zlib net zlib how
  • Next.js:如何将 source-map-explorer 与 Next.js 一起使用

    我想分析我的 Next js 构建源地图浏览器 https www npmjs com package source map explorer 有人可以帮我编写脚本吗 对于 React CRA 我使用以下脚本 build analyze n
  • Android - 存储对ApplicationContext的引用

    我有一个静态 Preferences 类 其中包含一些应用程序首选项和类似的内容 可以在那里存储对 ApplicationContext 的引用吗 我需要该引用 以便我可以在不继承 Activity 的类中获取缓存文件夹和类似内容 你使用的
  • 调用了 numberOfRowsInSection 但未调用 cellForRowAtIndexPath

    在我的表视图中节中的行数被调用两次但是cellForRowAtIndexPath不叫 我想在 tableView 中显示 Facebook 好友列表 如果 cellForRowAtIndexPath 调用我的问题就解决了 我在这里的数组中得
  • 分段错误(核心转储)错误

    我的程序编译罚款 但在输入文件时出现 分段错误 核心转储 错误 我没有正确处理 ostream 吗 include
  • 在后台从 gVim 运行 :make

    我在 Windows 中使用 gVim 来编辑我的代码 主要是 C 我在 gVim 中使用 make 来编译项目 但这是一个阻塞操作 在编译完成之前我无法使用 gVim 我怎样才能异步执行 make 并仍然获得将错误读回 Vim 并跳转到源
  • 如何在美人鱼节点描述中添加链接?

    我想 如下图所示 div class mermaid graph TD A hello B an b important b link A gt B div 在下面添加实际链接link指向http google com 我尝试将相关节点修改