mermaid使用指南+notion使用实例-持续更新中

最近一个月了吧,发现Notion插入图片的功能坏了,直接paste会404,本地上传也不行。电脑本地版和手机端都插不了图片,很头疼。解决方法也简单,用图床,放链接。

付费版我用的七牛,结合PicGo,在notion中是ok的。

免费版可以用b站的笔记。。就是写一个笔记,公开,然后复制图片,插入到notion。

不过我梳理了一下我要插入的图,大部分是流程图、思维导图之类只需要大概说明一些结构和顺序、方便记忆的、工程相关的图,所以还是决定用mermaid,直接写代码。

mermaid是一个基于JS的图表绘制工具,通过解析类Markdown的文本语法来实现图表的创建和动态修改。目前notion中是支持mermaid的,直接输入/mermaid即可插入。
在这里插入图片描述


文档:
Mermaid User Guide | Mermaid
http://mermaid.js.org/intro/getting-started.html
喜欢中文版的:
关于 Mermaid | Mermaid 中文网
https://mermaid.nodejs.cn/intro/


基础语法

参考:
MarkDown绘图mermaid流程graph - 简书
https://www.jianshu.com/p/598b121bdbef

绘图方向

TB 从上到下,BT 从下到上,RL 从右到左,LR 从左到右

节点形状

需要注意text两侧的写法。。不同的node是不一样的。
在这里插入图片描述

连线形状

在这里插入图片描述
连线上如果带注释的话,需要这样写:
在这里插入图片描述
如果是1-N或者N-1,那么使用&
在这里插入图片描述

子图

mermaid允许图的嵌套,不过node的名字必须全局唯一。格式是subgraph 名称 + 内容若干行 + end
在这里插入图片描述

注释

%%开头,单开一行。

链接

点击Mermaid,就可以跳转到对应链接。链接需要用引号包裹。
在这里插入图片描述

例子

下面会持续更新我用到的功能,涉及的技巧会附在后面。不过mermaid真的很简单,大部分时候copy一下就解决问题了。

基础绘图

先看效果。(图来自《极简学理财(吕白,2021)》,我从图书馆借的,废话很多,有用的有几句,不是很建议hhh但是这个图不错
在这里插入图片描述
对应的代码:

---
title: 省钱+存钱tips
---
graph LR省钱+存钱 --> 立即能削减的支出立即能削减的支出 --> 断舍离立即能削减的支出 --> 用高级欲望覆盖低级欲望立即能削减的支出 --> 将金钱与生命挂钩省钱+存钱 --> 必须要花的钱必须要花的钱 --> 定好预算必须要花的钱 --> 找对冲和替代消费必须要花的钱 --> 购置二手必须要花的钱 --> 优化金钱使用方式必须要花的钱 --> A[去掉#quot;寄生虫#quot;账单]必须要花的钱 --> 经常花的钱经常花的钱 --> 会员体系经常花的钱 --> 打折时适量囤货

需要注意的是,当需要在某个node中输入特殊符号的时候,需要用 A[] 这种格式,A表示文本框,[]里需要使用转义字符。双引号就是#quot; 其他可以参考这里:
【MarkDown】转义字符 - hitrjj - 博客园
https://www.cnblogs.com/Tom-Ren/p/10234956.html
Markdown 转义字符语法 | Markdown 官方教程
https://markdown.com.cn/basic-syntax/escaping-characters.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/661645.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux 路由配置与使用

概念 路由信息用于指导数据包从源地址查找到目的地址传输路径的信息; 路由分类 根据路由信息的来源分为静态路由和动态路由 静态路由 由管理员手动配置的路由表项信息,根据路由形式的不同,静态路由又可细分为: 直连路由&#xf…

LEETCODE 170. 交易逆序对的总数

class Solution { public:int reversePairs(vector<int>& record) {if(record.size()<1)return 0;//归并 递归int left,right;left0;rightrecord.size()-1;int nummergeSort(left,right,record);return num;}int mergeSort(int left,int right, vector<int>…

【Qt】Json在Qt中的使用

Json JSON&#xff08;JavaScript Object Notation&#xff09;是一种轻量级的数据交换格式&#xff0c;广泛用于互联网应用程序之间的数据传输。JSON基于JavaScript中的对象语法&#xff0c;但它是独立于语言的&#xff0c;因此在许多编程语言中都有对JSON的解析和生成支持。…

STM32CubeIDE 使用标准库来编写程序

这些天我想找一个软件来实现软件的替代。就找到了st 的生态。可是现在st 生态都在极力的推荐HAL 库,但是习惯了标准库的朋友们,还不是很习惯。 先上总结一下,为了好记忆: 一、 在编译栏做如下设置 1、头文件设置 2、源文件设置 二、指定具体的预定义宏 1、USE_STDPERIPH_D…

数据结构-图的最小生成树

最小生成树介绍 最小生成树(Minimum Cost Spanning Tree)是代价最小的连通网的生成树&#xff0c;即该生成树上的边的权值和最小 最小生成树的性质&#xff1a; 必须使用且仅使用连通网中的n-1条边来联结网络中的n个顶点&#xff1b; 不能使用产生回路的边&#xff1b; 各…

Linux部署幻兽帕鲁服务器,PalWorld开服联机教程,保姆级教程

------另一个号申请积分-------- Linux系统搭建PalWorld私服&#xff0c;幻兽帕鲁开服联机教程&#xff0c;保姆级教程 最近这游戏挺火&#xff0c;很多人想跟朋友联机&#xff0c;如果有专用服务器&#xff0c;就不需要房主一直开着电脑&#xff0c;稳定性也好得多。 幻兽帕…

Kubernetes operator(五)api 和 apimachinery 篇

云原生学习路线导航页&#xff08;持续更新中&#xff09; 本文是 Kubernetes operator学习 系列第五篇&#xff0c;主要对 k8s.io/api 和 k8s.io/apimachinery 两个项目 进行学习基于 kubernetes v1.24.0 代码分析Kubernetes operator学习系列 快捷链接 Kubernetes operator&a…

大数据StarRocks(九):资源隔离实战

前言 自 2.2 版本起&#xff0c;StarRocks 支持资源组管理&#xff0c;集群可以通过设置资源组&#xff08;Resource Group&#xff09;的方式限制查询对资源的消耗&#xff0c;实现多租户之间的资源隔离与合理利用。在 2.3 版本中&#xff0c;StarRocks 支持限制大查询&#…

Android配置GitLab CI/CD持续集成,Shell版本的gitlab-runner,FastLane执行,上传蒲公英

mac环境下&#xff0c; 首选需要安装gitlab-runner和fastlane brew install gitlab-runner brew install fastlane 安装完成&#xff0c;来到我们在gitlab下新建的Android项目&#xff0c;我们开始创建gitlab-runner 1、创建runner 点开runner&#xff0c;点击新建runner …

自然语言nlp学习四

5-5 BMTrain--ZeRO_哔哩哔哩_bilibili 5-6 BMTrain--Pipeline Parallel (流水线并行)_哔哩哔哩_bilibili 5-12 BMCook--背景介绍_哔哩哔哩_bilibili 5-20 BMInf--背景介绍_哔哩哔哩_bilibili 6-7 机器问答--QA介绍_哔哩哔哩_bilibili 6-8 机器问答--阅读理解_哔哩哔哩_bilibili…

常用API1 ---Math

包含用于执行基本数学运算的方法&#xff0c;如初等指数、对数、平方根和三角函数。 常用方法&#xff1a; package MyApi.a01mathdemo01;public class MathDemo01 {public static void main(String[] args) {//abs 获取参数的绝对值System.out.println(Math.abs(-88));System…

江科大stm32学习笔记10——对射式红外传感器

一、接线 上电之后可以看到对射式红外传感器亮两个灯&#xff0c;如果此时用挡光片挡住两个黑色方块中间的部分&#xff0c;则只亮一个灯。 二、代码 将4-1的工程文件夹复制粘贴一份&#xff0c;重命名为“5-1 对射式红外传感器计次”&#xff0c;打开keil&#xff0c;右键添…

认识 SYN Flood 攻击

文章目录 1.什么是 SYN Flood 攻击&#xff1f;2.半连接与全连接队列3.如何防范 SYN Flood 攻击&#xff1f;参考文献 1.什么是 SYN Flood 攻击&#xff1f; SYN Flood 是互联网上最原始、最经典的 DDoS&#xff08;Distributed Denial of Service&#xff09;攻击之一。 SYN…

[C#][opencvsharp]opencvsharp sift和surf特征点匹配

SIFT特征和SURF特征比较 SIFT特征基本介绍 SIFT(Scale-Invariant Feature Transform)特征检测关键特征&#xff1a; 建立尺度空间&#xff0c;寻找极值关键点定位&#xff08;寻找关键点准确位置与删除弱边缘&#xff09;关键点方向指定关键点描述子 建立尺度空间&#xff0…

SpringBoot RestTemplate 设置挡板

项目结构 代码 BaffleConfig /*** Description 记录配置信息* Author wjx* Date 2024/2/1 14:47**/ public interface BaffleConfig {// 是否开启挡板的开关public static boolean SWITCH true;// 文件根目录public static String ROOT_PATH "D:\\TIS\\mock";// …

最新2024如何解决谷歌浏览器Chrome谷歌翻译无法使用问题

快速恢复谷歌浏览器一键翻译功能在Chrome 中安装好【翻译】插件 Macbook 操作步骤&#xff1a; 1点击“前往”&#xff0c;打开“前往文件夹” 2 在对话框中输入“/etc” 囝找到“hosts”文件&#xff0c;复制粘贴到桌面 3 在复制的文件最后新起一行&#xff0c;输入并保存&am…

VUE3+TS使用OpenSeadragon学习之旅,实现多图片切换效果

1.官方网站&#xff1a;OpenSeadragon 2.使用npm下载插件&#xff1a;npm install openseadragon 3.在 index.html文件引入资源 <link rel"stylesheet" href"node_modules/openseadragon/build/openseadragon/openseadragon.css" /><script src…

消息队列的应用场景

消息队列的应用场景 消息队列中间件是分布式系统中重要的组件&#xff0c;主要解决应用耦合&#xff0c;异步消息&#xff0c;流量削锋等问题实现高性能&#xff0c;高可用&#xff0c;可伸缩和最终一致性架构使用较多的消息队列有ActiveMQ&#xff0c;RabbitMQ&#xff0c;Ze…

用户界面(UI)、用户体验(UE)和用户体验(UX)的差异

对一个应用程序而言&#xff0c;UX/UE (user experience) 设计和 UI (user interface) 设计非常重要。UX设计包括可视化布局、信息结构、可用性、图形、互动等多个方面。UI设计也属于UX范畴。正是因为三者在一定程度上具有重叠的工作内容&#xff0c;很多从业多年的设计师都分不…

ffmpeg合成mp3音频,解决音频属性不一致问题

1. 需求&#xff0c;amr转成mp3&#xff0c;再将此mp3和其他mp3合成 2. 问题&#xff1a;拼接后的第一段音频可以播放&#xff0c;第二段自动跳过&#xff0c;无法播放。 3. 解决&#xff1a; 3.1 查看各文件属性 # 查看amr转为mp3文件的属性&#xff1a;ffprobe 文件名&am…