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

news2024/9/26 3:20:30

最近一个月了吧,发现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.coloradmin.cn/o/1429866.html

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

相关文章

使用ngrok内网穿透

没有服务器和公网IP,想要其他人访问自己做好的网站,使用这款简单免费的内网穿透小工具——ngrok,有了它轻松让别人访问你的项目~ 一、下载ngrok 官网地址:ngrok | Unified Application Delivery Platform for Developers&#x…

React18构建Vite+Electron项目以及打包

一.先创建项目 cnpm create vite 选择React > JavaScript >cd react_vite > cnpm i >npm run dev 二.安装Electron依赖 指定版本相对稳定 cnpm i electron19.0.10 -D cnpm i vite-plugin-electron0.9.3 -D cnpm i electron-builder23.0.1 -D三.创建electron目录…

gRPC使用详解

起源特点主要优缺点应用场景组成部分使用方法SpringBoot集成gRPCVert.x集成gRPCNacos集成gRPC监控gRPC调用过程Java使用示例 起源 gRPC的起源可以追溯到2015年,当时谷歌发布了一款开源RPC框架,名为gRPC。gRPC的设计初衷是为了提供一种标准化、可通用和跨…

Java基于 SpringBoot+Vue 的前后端分离的小区物业系统,附源码

博主介绍:✌程序员徐师兄、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 🍅文末获取源码联系🍅 👇🏻 精彩专栏推荐订阅👇…

车载测试Vector工具——基于DoIP的ECU/车辆的连接故障排除

车载测试Vector工具——基于DoIP的ECU/车辆的连接故障排除 我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师(Wechat:gongkenan2013)。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 屏蔽力是信息过载时代一个人的特殊竞争力,任何消耗你的人和…

DevOps 教程 (4) - CI/CD 整合

在本第四章的"DevOps 教程"系列中,我们将介绍CI/CD整合的概念和实践。我们会介绍DevOps所带来的好处,包括团队协作、开发效率和产品交付速度的显著提升。 我们还将讨论在DevOps中的不同角色,并理解每个角色在持续集成和持续交付中的…

AI助力农作物自动采摘,基于YOLOv8全系列【n/s/m/l/x】参数模型开发构建作物生产场景下番茄采摘检测计数分析系统

去年十一那会无意间刷到一个视频展示的就是德国机械收割机非常高效自动化地24小时不间断地在超广阔的土地上采摘各种作物,专家设计出来了很多用于采摘不同农作物的大型机械,看着非常震撼,但是我们国内农业的发展还是相对比较滞后的&#xff0…

【C语言期末】职工管理系统

本文资源:https://download.csdn.net/download/weixin_47040861/88805231 1.题目要求 职工管理系统 问题描述:对单位的职工进行管理,包括插入、删除、查找、排序等功能。 要求:职工对象包括姓名、性别、出生年月、工作年月、学历…

【Springcloud篇】学习笔记二(四至六章):Eureka、Zookeeper、Consul

第四章_Eureka服务注册与发现 1.Eureka基础知识 1.1Eureka工作流程-服务注册 1.2Eureka两大组件 2.单机Eureka构建步骤 IDEA生成EurekaServer端服务注册中心,类似于物业公司 EurekaClient端cloud-provider-payment8081将注册进EurekaServer成为服务提供者provide…

将结构体中的浮点数数据提取出来并发送至串口屏显示

1、由于项目中定义了一个结构体如下: typedef struct {uint16_t number;uint16_t LocationData;uint16_t PersonData; // _calendar_obj calendar; // uint16_t LiuLiang_Value;float LiuLiang_Value;_calendar_obj calendar_records; } Frame; 现需要将其中的flo…

新手从零开始学习数学建模论文写作(美赛论文临时抱佛脚篇)

本文记录于数学建模老哥视频的学习过程中。b站视频:http://【【零基础教程】老哥:数学建模算法、编程、写作和获奖指南全流程培训!】https://www.bilibili.com/video/BV1kC4y1a7Ee?p50&vd_sourceff53a726c62f94eda5f615bd4a62c458 目录…

一分钟教你搭建steam幻兽帕鲁服务器,稳定不卡

如何自建幻兽帕鲁服务器?基于阿里云服务器搭建幻兽帕鲁palworld服务器教程来了,一看就懂系列。本文是利用OOS中幻兽帕鲁扩展程序来一键部署幻兽帕鲁服务器,阿里云百科aliyunbaike.com分享官方基于阿里云服务器快速创建幻兽帕鲁服务器教程&…

2024年适合进入股市吗?北京想开股票账户找哪家证券公司交易佣金费用最低?

股市规则是指股票市场中的一系列规则和制度,用于监管和管理股票交易。以下是一些常见的股市规则: 证券法律法规:股市规则的基础是国家的证券法律法规,包括证券法、公司法等,用于规范股票发行、交易和上市等方面的法律规…

【紧耦合新范式】Think-on-Graph:解决大模型在医疗、法律、金融等垂直领域的幻觉

Think-on-Graph:解决大模型在医疗、法律、金融等垂直领域的幻觉 Think-on-Graph 原理ToG 算法步骤:想想再查,查查再想实验结果 论文:https://arxiv.org/abs/2307.07697 代码:https://github.com/IDEA-FinAI/ToG Think…

AI专题:2023年AI创意营销趋势白皮书

今天分享的是AI系列深度研究报告:《AI专题:2023年AI创意营销趋势白皮书》。 (报告出品方:蓝色光标集团销博特) 报告共计:65页 2022年10月 Stabili ty AI获得1.01亿美元融资 开源人工智能公司 StabilityA…

STM32CAN2进入bus off 模式

工作遇到的问题记录 无人机CAN2整个进不了中断,通过查看寄存器判定出CAN节点进入了bus off mode 为何进入bus off ,最后通过示波器看到整个CAN2总线波形就不对,总线出现了错误 Busoff的产生是一定是因为节点自身识别到自己发送错误&#xff…

Konva中滚动问题

现在有两个group,想要的效果时拖动绿的group时,红色group按照相同方向移动同样距离 可以在绿的group的拖动方法中 通过move方法 移动红色的group

零基础Vue框架上手;git,node,yarn安装

项目搭建环境: git安装:Git - 安装 Git (git-scm.com)(官网) 下载路径:Git - Downloading Package (git-scm.com);根据自己电脑下载相对应的安装包 ​ 点next ​ 点next,点到最后安装就行。…

人工智能基础-matplotlib基础

绘制图形 import numpy as np x np.linspace(0, 10, 100) y np.sin(x) import matplotlib as mpl import matplotlib.pyplot as plt plt.plot(x, y) plt.show()绘制多条曲线 siny y.copy() cosy np.cos(x) plt.plot(x, siny) plt.plot(x, cosy) plt.show()设置线条颜色 …

2024年第四届能源与环境工程国际会议(CoEEE 2024) | Ei Scopus检索

会议简介 Brief Introduction 2024年第四届能源与环境工程国际会议(CoEEE 2024) 会议时间:2024年5月22日-24日 召开地点:意大利米兰 大会官网:www.coeee.org CoEEE 2024将围绕“能源与环境工程”的最新研究领域而展开,为研究人员、…