当前位置: 首页 > news >正文

mermaid 图表相关

1.mermaid图表的代码

1.1 flowchart 流程图代码
flowchart TDA[Christmas] -->|Get money| B(Go shopping)B --> C{Let me think}C -->|One| D[Laptop]C -->|Two| E[iPhone]C -->|Three| F[fa:fa-car Car]
1.2 sequece 时序图代码
sequenceDiagramAlice->>+John: Hello John, how are you?Alice->>+John: John, can you hear me?John-->>-Alice: Hi Alice, I can hear you!John-->>-Alice: I feel great!
1.3 gantt 干诺图代码
gantttitle A Gantt DiagramdateFormat  YYYY-MM-DDsection SectionA task           :a1, 2014-01-01, 30dAnother task     :after a1  , 20dsection AnotherTask in sec      :2014-01-12  , 12danother task      : 24d
1.4 block 组件图代码
block-betacolumns 3doc>"Document"]:3space down1<[" "]>(down) spaceblock:e:3l["left"]m("A wide one in the middle")r["right"]endspace down2<[" "]>(down) spacedb[("DB")]:3space:3D space Cdb --> DC --> dbD --> Cstyle m fill:#d6d,stroke:#333,stroke-width:4px

2.mermaid图表的生成方式

2.1 在线生成网站 可导出 图表较丑
  • mermaid.live

支持标准mermaid代码
生成固定的图表:风格无法修改
导出方便

2.2 sublime生成 图表可以 截图导出
  • 安装Node.js:默认安装在C盘,不必选择安装缺少工具
  • 使用npm安装Mermaid CLI
    • npm install -g @mermaid-js/mermaid-cli
    • 如果因为国外源不稳定,可以选择国内源
      • https://registry.npmmirror.com 淘宝
      • https://mirrors.cloud.tencent.com/npm/ 腾讯
    • 重新利用国内源安装
      • 使用超级用户权限,启动cmd或powershell:因为按照过程中要删除目录
      • npm cache clean --force
      • npm install -g cnpm --registry=https://registry.npmmirror.com
  • 验证安装
    • mmdc -v
  • 使用Mermaid CLI
    • mmdc -i input.mmd -o output.svg
    • mmdc -i 示例.md -o 示例.png --width 2048 --height 2048 --scale 2 //生成白底图表png
  • 安装sublime插件OmniMarkupPreviewer
  • 安装sublime插件markdown live preview
  • 编写mermaid图表代码
  • 在sublime里完成预览:如果失败,那么cmd里执行mmdc命令手动生成即可
2.3 vscode生成
  • 安装Markdown Preview Mermaid Support插件
  • 创建或编辑Markdown文件:需要放在mermaid代码块里
  • 预览Mermaid流程图:ctrl+shirf+v
  • 截图导出

相关文章:

mermaid 图表相关

1.mermaid图表的代码 1.1 flowchart 流程图代码 flowchart TDA[Christmas] -->|Get money| B(Go shopping)B --> C{Let me think}C -->|One| D[Laptop]C -->|Two| E[iPhone]C -->|Three| F[fa:fa-car Car]1.2 sequece 时序图代码 sequenceDiagramAlice->&…...

Unity接入人工智能

在Unity接入人工智能中&#xff0c;本篇实现了接入百度智能云ai进行npc智能对话&#xff0c;通过http方式&#xff0c;并非插件&#xff0c;适合于所有支持Http链接的Unity版本。对于Chartgpt可以参考本篇内容的实现过程。 1-4节讲解测试&#xff0c;第5节讲解Unity中的实现&a…...

C语言笔记 14

函数原型 函数的先后关系 我们把自己定义的函数isPrime()写在main函数上面 是因为C的编译器自上而下顺序分析你的代码&#xff0c;在看到isPrime的时候&#xff0c;它需要知道isPrime()的样子——也就是isPrime()要几个参数&#xff0c;每个参数的类型如何&#xff0c;返回什么…...

Cpp::STL—list类的模拟实现(上)(13)

文章目录 前言一、结点类的实现二、迭代器类的实现迭代器类的存在意义迭代器类的模板参数构造函数运算符的重载--运算符的重载、!运算符的重载*运算符的重载->运算符的重载 总结 前言 注意本篇难度偏高&#xff0c;其主要体现在迭代器类的实现&#xff01;   什么&#xf…...

ListView的Items绑定和comboBox和CheckBox组合使用实现复选框的功能

为 ListView 控件的内容指定视图模式的方法&#xff0c;参考官方文档。 ComboBox 样式和模板 案例说明&#xff1a;通过checkBox和ComboBox的组合方式实现下拉窗口的多选方式&#xff0c;同时说明了ListView中Items项目的两种绑定方式. 示例&#xff1a; 设计样式 Xaml代码…...

PetaLinux工程的常用命令——petalinux-build

petalinux-build&#xff1a;编译项目或指定组件。 注&#xff1a;有些命令我没用过&#xff0c;瞎翻译有可能会翻译错了。 用法: petalinux-build [options] 可选参数: -h, --help 显示函数用法。 -p, --project <PROJECT> PetaLinuxSDK项目的路径。默认…...

【Qt】窗口预览(1)—— 菜单栏

窗口预览&#xff08;1&#xff09; 1. QMainWindow2. QMenuBar——菜单栏2.1 创建菜单栏/将菜单栏添加到widget中2.2 addMenu——在菜单栏中添加菜单2.3 在菜单中添加选项2.4 添加快捷键2.5 支持嵌套添加菜单2.6 添加信号2.7 添加分割线 1. QMainWindow Qt窗口是通过QMainWin…...

揭秘酱香型白酒中的6大劣质酒的特点,守好你的健康与钱包

你知道吗&#xff1f;居然有 90%的人都喝过这 6 种劣质酱香型白酒&#xff0c;今天酱酒亮哥就带大家一起揭开它们的真面目&#xff0c;看看你中招了没有&#xff01; 先说那种有很浓的生粮味的酱酒&#xff0c;就像刚磨出来还没烧开的豆浆味&#xff0c;喝起来那叫一个难受。想…...

C#拓展方法

定义 扩展方法使你能够向现有类型“添加”方法&#xff0c;而无需创建新的派生类型、重新编译或以其他方式修改原始类型。 扩展方法是一种静态方法&#xff0c;但可以像扩展类型上的实例方法一样进行调用。 对于用 C#、F# 和 Visual Basic 编写的客户端代码&#xff0c;调用扩…...

02.顺序表、链表简述+对比

目录 一、线性表 二、顺序表 三、链表 四、顺序表和链表的区别 一、线性表 线性表&#xff08;linear list&#xff09;是n个具有相同特性的数据元素的有限序列&#xff08;相同特性指都为整型int、字符型char或其它类型&#xff09;。 线性表是一种在实际中广泛使用的数据…...

前端布局与响应式设计综合指南(三)

​&#x1f308;个人主页&#xff1a;前端青山 &#x1f525;系列专栏&#xff1a;Css篇 &#x1f516;人终将被年少不可得之物困其一生 依旧青山,本期给大家带来Css篇专栏内容:前端布局与响应式设计综合指南(三) 目录 42、px/em/rem有什么区别&#xff1f;为什么通常给font-s…...

当今SNARKs全景

1. 引言 前序博客有&#xff1a; ZKP历史总览SNARK原理示例SNARK性能及安全——Prover篇SNARK性能及安全——Verifier篇Transparent 且 Post-quantum zkSNARKsSNARK DesignRollup项目的SNARK景观 SNARKs因&#xff1a; proof size证明时长验证时长密码学信任假设是否需要tr…...

PMP敏捷专题课:敏捷原则与理念

信息发射源、看板是敏捷相关的词汇。 需求不明确&#xff1a;敏捷的关键词。 明确的端对端工作范围是传统项目管理的关键词。所以&#xff0c;应该采用&#xff1a;混合的&#xff0c;多轨制&#xff0c;瀑布态这样的声明周期 STACEY矩阵。 敏捷价值观指引者我们敏捷的实现。…...

有两个水桶,容量分别为5升和3升,请问如何使用这两个桶得到4升的水?

网上看到的一个面试的题目&#xff0c;感觉挺有意思的记录一下 可以按照以下步骤使用这两个桶得到 4 升的水&#xff1a; 将 5 升水桶装满水&#xff0c;倒入 3 升水桶中&#xff0c;此时 5 升水桶中还剩下 2 升水。将 3 升水桶中的水全部倒掉&#xff0c;然后将 5 升水桶中的…...

pytorch_lightning笔记

Debug 1. 快速运行一次所有的代码 (fast_dev_run) 训练了好长时间但是在训练or 验证的时候崩溃了 使用 fast_dev_run运行5个batch 的 training validation test and predication 查看是否存在错误&#xff1a; train Trainer(fast_dev_runTrue) # True 时为5 train Train…...

从零开始了解云WAF,您的网站安全升级指南

网站安全对任何线上业务来说至关重要&#xff0c;尤其是在网络威胁不断升级的今天。无论是流量高峰期还是日常运营&#xff0c;确保数据安全与服务稳定是每个网站运营者最关心的事情。云WAF&#xff08;Web应用防火墙&#xff09;作为一种高效的安全防护手段&#xff0c;正逐渐…...

Python脚本爬取目标网站上的所有链接

一、爬取后txt文件保存 需要先pip install requests和BeautifulSoup库 import requests from bs4 import BeautifulSoup# 定义要爬取的新闻网站URL url https://www.chinadaily.com.cn/ # China Daily 网站# 发送请求获取页面内容 response requests.get(url)# 检查请求是否…...

Linux下以编译源码的方式安装Qt5与Qt6及其使用

文章目录 概要资源下载依赖安装编译Qt5Qt6 遇到的问题qtchooser使用 概要 自 Qt 5.15 开始&#xff0c;不再提供 open source offline installers&#xff0c;也就是原来的 .run 的安装文件&#xff0c;只能通过源码编译来安装了参考文章 资源下载 源码网址&#xff0c;链接…...

替换掉js后重启nginx 页面加载后js还是原来的 解决方法.【js版本号】【js不生效】【js失效】

原文&#xff1a; 替换掉js后重启nginx 页面加载后js还是原来的 解决方法.【js版本号】【js不生效】【js失效】 产品升级&#xff0c;部署js后&#xff0c;前端页面加载不生效&#xff0c;F12 NetWork查看js源码还是原来的内容。但是查看前端服务器上js已经是最新版本。 &…...

SHELL脚本之输出语句的使用

shell脚本能够给用户显示一些信息&#xff0c;就需要输出语句的使用。 1.echo语句 如上图所示&#xff0c;中英文都可以&#xff0c; 如上图所示&#xff0c;在shell脚本中对于转义符的使用应该加上-e的选项&#xff0c;\n表示换行&#xff0c;\t表示电脑键盘上使用tab键隔开的…...

浏览器访问 AWS ECS 上部署的 Docker 容器(监听 80 端口)

✅ 一、ECS 服务配置 Dockerfile 确保监听 80 端口 EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]或 EXPOSE 80 CMD ["python3", "-m", "http.server", "80"]任务定义&#xff08;Task Definition&…...

接口测试中缓存处理策略

在接口测试中&#xff0c;缓存处理策略是一个关键环节&#xff0c;直接影响测试结果的准确性和可靠性。合理的缓存处理策略能够确保测试环境的一致性&#xff0c;避免因缓存数据导致的测试偏差。以下是接口测试中常见的缓存处理策略及其详细说明&#xff1a; 一、缓存处理的核…...

8k长序列建模,蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂

蛋白质结合剂&#xff08;如抗体、抑制肽&#xff09;在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上&#xff0c;高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术&#xff0c;但这类方法普遍面临资源消耗巨大、研发周期冗长…...

【位运算】消失的两个数字(hard)

消失的两个数字&#xff08;hard&#xff09; 题⽬描述&#xff1a;解法&#xff08;位运算&#xff09;&#xff1a;Java 算法代码&#xff1a;更简便代码 题⽬链接&#xff1a;⾯试题 17.19. 消失的两个数字 题⽬描述&#xff1a; 给定⼀个数组&#xff0c;包含从 1 到 N 所有…...

第25节 Node.js 断言测试

Node.js的assert模块主要用于编写程序的单元测试时使用&#xff0c;通过断言可以提早发现和排查出错误。 稳定性: 5 - 锁定 这个模块可用于应用的单元测试&#xff0c;通过 require(assert) 可以使用这个模块。 assert.fail(actual, expected, message, operator) 使用参数…...

Psychopy音频的使用

Psychopy音频的使用 本文主要解决以下问题&#xff1a; 指定音频引擎与设备&#xff1b;播放音频文件 本文所使用的环境&#xff1a; Python3.10 numpy2.2.6 psychopy2025.1.1 psychtoolbox3.0.19.14 一、音频配置 Psychopy文档链接为Sound - for audio playback — Psy…...

土地利用/土地覆盖遥感解译与基于CLUE模型未来变化情景预测;从基础到高级,涵盖ArcGIS数据处理、ENVI遥感解译与CLUE模型情景模拟等

&#x1f50d; 土地利用/土地覆盖数据是生态、环境和气象等诸多领域模型的关键输入参数。通过遥感影像解译技术&#xff0c;可以精准获取历史或当前任何一个区域的土地利用/土地覆盖情况。这些数据不仅能够用于评估区域生态环境的变化趋势&#xff0c;还能有效评价重大生态工程…...

Unit 1 深度强化学习简介

Deep RL Course ——Unit 1 Introduction 从理论和实践层面深入学习深度强化学习。学会使用知名的深度强化学习库&#xff0c;例如 Stable Baselines3、RL Baselines3 Zoo、Sample Factory 和 CleanRL。在独特的环境中训练智能体&#xff0c;比如 SnowballFight、Huggy the Do…...

ios苹果系统,js 滑动屏幕、锚定无效

现象&#xff1a;window.addEventListener监听touch无效&#xff0c;划不动屏幕&#xff0c;但是代码逻辑都有执行到。 scrollIntoView也无效。 原因&#xff1a;这是因为 iOS 的触摸事件处理机制和 touch-action: none 的设置有关。ios有太多得交互动作&#xff0c;从而会影响…...

【前端异常】JavaScript错误处理:分析 Uncaught (in promise) error

在前端开发中&#xff0c;JavaScript 异常是不可避免的。随着现代前端应用越来越多地使用异步操作&#xff08;如 Promise、async/await 等&#xff09;&#xff0c;开发者常常会遇到 Uncaught (in promise) error 错误。这个错误是由于未正确处理 Promise 的拒绝&#xff08;r…...