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…

SpringBoot拉取日历数据

SpringBoot拉取日历数据 一、前言 万年历API:https://www.mxnzp.com/doc/detail?id1 二、代码如下 按年生成日历数据国家一般当年10月底发布下一年度的节假日安排 package com.qiangesoft.calendar.mxnzp;import com.baomidou.mybatisplus.core.conditions.qu…

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>…

Tomcat -- catalina.bat

Tomcat – catalina.bat 配置 1. 手动分配内存&#xff0c;防溢出 # 位置&#xff1a;..\Tomcat\bin\catalina.bat&#xff1b; # echo off 下面添加&#xff08;第二行&#xff09;&#xff1a; set JAVA_OPTS-server -Xms2048m -Xmx2048m -Xss512k -XX:NewSize256m -XX:Max…

【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…

C++——new关键字

C——new关键字 介绍 在C中&#xff0c; new 关键字用于动态分配内存。它是C中处理动态内存分配的主要工具之一&#xff0c;允许在程序运行时根据需要分配内存。 基本用法 分配单个对象&#xff1a;使用 new 可以在堆上动态分配一个对象。例如&#xff0c; new int 会分配一…

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

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

ChatGLM-6B在法律数据集上微调

目录 数据集 训练和推理 依赖 训练 推理 数据集 数据集&#xff1a;lawzhidao_filter.csv &#xff08;工作台 - Heywhale.com&#xff09; 处理&#xff1a; 1&#xff09;筛选is_best1的行&#xff0c;删除reply为空的行&#xff0c;在title和question中选择描述长的…

C++面试:数据库不同存储引擎的区别以及如何选择

目录 基础 具体选择原则 Mysql如何选择 创建表时指定存储引擎 修改现有表的存储引擎 查看表的存储引擎 注意事项 总结 在数据库管理系统中&#xff0c;不同的存储引擎提供了不同的存储机制、索引技术、锁定水平和其他功能。以MySQL为例&#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…

【PyRestTest】进行Benchmarking测试

PyRestTest支持通过Curl请求本身收集比较差的网络环境下的性能指标。 基准测试&#xff1a;它们扩展了测试中的配置元素&#xff0c;允许你进行相似的REST调用配置。然而&#xff0c;它们不对HTTP响应情况进行验证&#xff0c;它只收集指标数据。 下列选项被指定用于benchmar…

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

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