dede 大家好，今天给各位分享mermaid是什么意思的一些知识，其中也会对搭上生成式AI快车的第一款图表生成器进行解释，文章篇幅可能偏长，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在就马上开始吧！
大家好，很高兴又见面了，我是"高级前端?进阶?"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。
Mermaid是一种基于JavaScript的图表绘制工具，它采用Markdown启发的文本定义并在浏览器中动态创建图表。它由KnutSveidqvist维护，支持软件项目的许多不同的常见图表类型，包括：流程图、UML、Git图、用户旅程图，甚至是甘特图。
Mermaid甚至与Knut以及CommonMark更广泛的社区合作，推出了一项更改，允许开发者使用Mermaid语法创建内联图形，例如：
graphTD;\nA-->B;\nA-->C;\nB-->D;\nC-->D;
上面的原始代码块在渲染的Markdown中将生成如下图所示：
目前Mermaid在Github上通过MIT协议开源，有超过60.4k的star、5k的fork、项目依赖量29k、代码贡献者500+、妥妥的前端优质开源项目。
当遇到标记为mermaid的代码块时，会自动生成一个iframe，其采用原始Mermaid语法并将其传递给Mermaid.js，从而将该代码转换为本地浏览器中的图表。
Mermaid通过两个阶段的过程来实现这一目标：GitHub的HTML管道和Viewscreen（Mermaid的内部文件渲染服务）。
首先，Mermaid向HTML管道添加一个过滤器，用于查找具有mermaid语言名称的原始pre标记，并将其替换为渐进式工作的模板，以便客户端在非JavaScript环境（例如API）中请求嵌入Mermaid的内容请求能看到原始Markdown代码。
接下来，假设在支持JavaScript的环境中查看内容，Mermaid将iframe注入页面，将src属性指向Viewscreen服务。
调用JavaScriptAPI可用于任何常见的Web服务器，例如：Apache、IIS、nginx、nodeexpress。
开发者只需要使用Notepad++这样的文本编辑工具来生成.html文件。然后由Web浏览器（例如Firefox、Chrome、Safari，但不包括InternetExplorer）部署。
该API的工作原理是从源mermaid.js中提取渲染指令，以便在页面上渲染图表。在编写.html文件时，在html代码中向Web浏览器发出两条指令：
需要注意的是，创建mermaid图表的语法定义在<preclass="mermaid">中。
<body>\nHereisamermaiddiagram:\n<preclass="mermaid">\ngraphTDA[Client]-->B[LoadBalancer]B-->C[Server01]B-->D[Server02]\n</pre>\n</body>
mermaid.initialize()调用获取在html正文中找到的所有<preclass="mermaid">标记中包含的所有定义，并将它们渲染到图表中。
<body>\n<scripttype="module">\nimportmermaidfrom'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';\nmermaid.initialize({startOnLoad:true});\n</script>\n</body>
需要注意的是，Mermaid中的渲染是通过mermaid.initialize()调用初始化的。但是，Mermaid可以让开发者控制何时开始使用mermaid.initialize()在网页内查找<pre>标记。当您认为并非所有<pre>标记都已在mermaid.esm.min.mjs文件的执行中加载时，这非常有用。
startOnLoad是mermaid.initialize()可以定义的参数之一
Mermaid官方团队开发了MermaidChartChatGPT插件，该插件结合了MermaidChart和ChatGPT的功能，以简化图表创建和协作。借助MermaidChartChatGPT插件，开发者可以利用生成式AI和智能图表的潜力来提高工作效率并加强团队的沟通。
安装MermaidChartChatGPT插件很简单，只需按照以下步骤操作：
使用MermaidChartChatGPT插件也非常简单，只需要按照如下流程：
MermaidChartChatGPT插件提供了许多好处来增强图表绘制体验：
https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/
https://github.com/mermaid-js/mermaid
http://mermaid.js.org/intro/n00b-gettingStarted.html#_3-calling-the-javascript-api
https://medium.com/@elle.neal_71064/mind-mapping-with-ai-an-accessible-approach-for-neurodiverse-learners-1a74767359ff
https://www.mermaidchart.com/plugins/chatgpt
mermaid是什么意思的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于搭上生成式AI快车的第一款图表生成器、mermaid是什么意思的信息别忘了在本站进行查找哦。
微信扫一扫打赏
支付宝扫一扫打赏
