Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >如何在 FlowUs、Notion笔记软件使用白板和代码绘制流程图(二)

如何在 FlowUs、Notion笔记软件使用白板和代码绘制流程图(二)

原创
作者头像
数字花园
发布于 2022-06-04 02:29:42
发布于 2022-06-04 02:29:42
2.1K0
举报
文章被收录于专栏:软件深度评测软件深度评测

如何在白板工具和代码绘制流程图?

关于如何在 FlowUs 这样的效率工具中如何使用流程图的话题,上次我们在文章中推荐了 ProcessOn 和 Draw.io 这两款工具。具体可以阅读原文。

除了专门的流程图工具,还有其他解决方案吗?

  1. 使用白板工具绘制流程图或者思维导图。
  2. 使用代码绘制流程图

白板工具:Miro

介绍

一款备受好评、在线协作白板工具。

优点

  • 使用十分流畅。虽然是 Web 应用,但是具有了媲美原生应用的使用体验。
  • 功能强大,模版丰富。当然,绘制流程图也不在话下,拥有不少好用的流程图模版。
  • 支持在线协作。

缺点

由于汇率原因,价格比较贵

Miro 官网

流程图工具:Whimsical

介绍

一款强大的在线流程绘制工具。

优点

  • 支持在线协作;
  • 拥有丰富的流程图模版。当然,你可以使用 Whimsical 绘制思维导图、看板

缺点

由于汇率原因,价格比较贵

Whimsical 官网

使用代码绘制流程图

已有的各种流程图工具或者白板工具已经很好用了。然而,对于一些人而言,使用这两种方式生成的流程图迁移和修改依然比较麻烦。

能不能只关注流程图的内在逻辑,把外在形式交给工具?那么,选择使用代码绘制流程图便是很好的选择。

使用 Mermaid 语法

在 Notion 等工具中,你可以直接使用代码显示 mermaid. 至于FlowUs 的这一功能,不久便会上线。届时,你可以在 FlowUs 的任何页面触发 / 命令,随后选择  Code Block. 然后,将语言更改为 Mermaid, 你输入你的代码。最后,便会显示流程图。 如果你感兴趣,可以检索"使用 Markdown 代码绘制流程图"

HOW TO GET STARTED WITH MERMAID IN NOTION

使用 Kroki 在线服务

由于 FlowUs 暂时不支持 Mermaid 语法,我现在推荐你使用 Kroki.

介绍

一个专业的流程图在线服务站点。

使用方法

  1. 前往 Kroki 官网
  2. 前往 #Try 部分
  3. 选择你的流程图 (PlantUML, mermaid, ..)
  4. 写在你的流程图代码
  5. 复制 URL 链接
  6. 粘贴至 FlowUs 等工具,并且嵌入网页。

优势

Kroki 相当于 流程图图书馆 Diagrams libraries, 你在其中可以选择多种程序语言编写流程图;

Kroki 为所有的图表库提供了一个统一的 API, 你可以在任何地方使用这些图表;

你在等什么呢?快去打开你的 FlowUs 试试吧

Kroki 官网

在 FlowUs 中使用 Kroki

以下是 Kroki 在我的生产力工具 FlowUs 中的显示效果

FlowUs 息流 - 新一代生产力工具flowus.cn

最后,再介绍一下 FlowUs

FlowUs 息流笔记·模版

主页·仪表盘模板

自媒体运营模版

进度条综合模版

上述部分模版部分使用国产小组件库 NotionPet 制作:

  • 关于 NotionPet 的专文评测:《国产组件库 NotionPet:为笔记嵌入可视化模块
  • NotionPet 官网:https://notion.pet/home.html
  • NotionPet 提供大量好看、实用的小组件,可以辅助进行时间管理、任务管理、笔记记录、资讯管理、创意写作等多种使用场景。其中,小组件数量正在不断丰富服务稳定。并且,NotionPet 提供了强大的定制化服务,可以满足你的个性化配置需求

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
力扣 (LeetCode)-104. 二叉树的最大深度,图
每天学习编程,让你离梦想更新一步,感谢不负每一份热爱编程的程序员,不论知识点多么奇葩,和我一起,让那一颗四处流荡的心定下来,一直走下去,加油,2021加油!欢迎关注加我vx:xiaoda0423,欢迎点赞、收藏和评论
达达前端
2021/03/22
6770
力扣 (LeetCode)-104. 二叉树的最大深度,图
用js来实现那些数据结构16(图02-图的遍历)
  上一篇文章我们简单介绍了一下什么是图,以及用JS来实现一个可以添加顶点和边的图。按照惯例,任何数据结构都不可或缺的一个point就是遍历。也就是获取到数据结构中的所有元素。那么图当然也不例外。这篇文章我们就来看看如何遍历以及用js来实现图的遍历。   首先,有两种算法可以对图进行遍历:广度优先搜索(BFS)和深度优先搜索(DFS)。图的遍历可以用来寻找特定的顶点,可以寻找两个顶点之间有哪些路径,检查图是否是联通的,也可以检查图是否含有环等等。   在开始代码之前,我们需要了解一下图遍历的思想,也就是说,
zaking
2018/06/14
1.7K1
TypeScript实现图
图是一个非线性数据结构,本文将讲解图的基本运用,将图巧妙运用,并用TypeScript将其实现,欢迎各位感兴趣的开发者阅读本文。
神奇的程序员
2022/04/10
6300
TypeScript实现图
【你该懂一点Javascript算法系列】之【图类】的定义及深度优先与广度优先搜索算法
图 github直达地址 https://github.com/fanshyiis/...
super.x
2019/04/12
6450
【你该懂一点Javascript算法系列】之【图类】的定义及深度优先与广度优先搜索算法
文心一言 VS 讯飞星火 VS chatgpt (309)-- 算法导论22.2 7题
七、职业摔跤手可以分为两种类型:“娃娃脸”(“好人”)型和“高跟鞋”(“坏人”)型。在任意一对职业摔跤手之间都有可能存在竞争关系。假定有 n 个职业摔跤手,并且有一个给出竞争关系的 r 对摔跤手的链表。请给出一个时间为 O(n+r) 的算法来判断是否可以将某些摔跤手划分为“娃娃脸”型,而剩下的划分为“高跟鞋”型,使得所有的竞争关系均只存在于娃娃脸型和高跟鞋型选手之间。如果可以进行这种划分,则算法还应当生成一种这样的划分。如果要写代码,请用go语言。
福大大架构师每日一题
2024/08/16
1060
文心一言 VS 讯飞星火 VS chatgpt (309)-- 算法导论22.2 7题
文心一言 VS 讯飞星火 VS chatgpt (303)-- 算法导论22.2 1题
一、请计算出在有向图22-2(a)上运行广度优先搜索算法后的d值和π值。这里假定结点3为算法所用的源结点。如果要写代码,请用go语言。
福大大架构师每日一题
2024/08/16
1170
文心一言 VS 讯飞星火 VS chatgpt (303)-- 算法导论22.2 1题
从 0 开始学习 JavaScript 数据结构与算法(十二)图
在计算机程序设计中,图也是一种非常常见的数据结构,图论其实是一个非常大的话题,在数学上起源于哥尼斯堡七桥问题。
XPoet
2021/04/26
7710
用js来实现那些数据结构15(图01)
  其实在上一篇介绍树结构的时候,已经有了一些算法的相关内容介入。而在图这种数据结构下,会有更多有关图的算法,比如广度优先搜索,深度优先搜索最短路径算法等等。这是我们要介绍的最后一个数据结构。同时也是本系列最为复杂的一个。那么我们先来简单介绍一下,什么是图? 一、图的概念   简单说,图就是网络结构的抽象模型,图是一组由边连接的节点(或顶点)。任何二元关系都可以用图来表示。比如我们的地图,地铁线路图等。都是图的实际应用。   接着我们看看图的一些相关概念和术语。   一个图G = (V,E)由以下元素组成:
zaking
2018/06/14
7080
文心一言 VS 讯飞星火 VS chatgpt (331)-- 算法导论22.5 7题
为了判断一个有向图是否是半连通的,我们可以使用深度优先搜索(DFS)或广度优先搜索(BFS)。核心思路是检查从任意顶点出发是否能访问到所有其他顶点,并且对于任意顶点,都存在一条路径到达另一个顶点或另一个顶点存在一条路径到达它。
福大大架构师每日一题
2024/08/29
1260
文心一言 VS 讯飞星火 VS chatgpt (331)-- 算法导论22.5 7题
文心一言 VS 讯飞星火 VS chatgpt (307)-- 算法导论22.2 5题
五、证明:在广度优先搜索算法里,赋给结点 u 的 u.d 值与结点在邻接链表里出现的次序无关。使用图 22-3 作为例子,证明:BFS 所计算出的广度优先树可以因邻接链表中的次序不同而不同。如果要写代码,请用go语言。
福大大架构师每日一题
2024/08/16
1240
文心一言 VS 讯飞星火 VS chatgpt (307)-- 算法导论22.2 5题
数据结构——图
图是一组由边连接的顶点。任何二元关系都可以用图来表示。社交网络、道路等都可以用图来表示。
多云转晴
2020/05/21
9410
【数据结构与算法】详解什么是图结构,并用代码手动实现一个图结构
本系列文章【数据结构与算法】所有完整代码已上传 github,想要完整代码的小伙伴可以直接去那获取,可以的话欢迎点个Star哦~下面放上跳转链接
@零一
2021/01/29
5760
文心一言 VS 讯飞星火 VS chatgpt (315)-- 算法导论22.3 7题
七、请重写DFS算法的伪代码,以便使用栈来消除递归调用。如果要写代码,请用go语言。
福大大架构师每日一题
2024/08/16
1100
文心一言 VS 讯飞星火 VS chatgpt (315)-- 算法导论22.3 7题
数据结构基础温故-5.图(中):图的遍历算法
上一篇我们了解了图的基本概念、术语以及存储结构,还对邻接表结构进行了模拟实现。本篇我们来了解一下图的遍历,和树的遍历类似,从图的某一顶点出发访问图中其余顶点,并且使每一个顶点仅被访问一次,这一过程就叫做图的遍历(Traversing Graph)。如果只访问图的顶点而不关注边的信息,那么图的遍历十分简单,使用一个foreach语句遍历存放顶点信息的数组即可。但是,如果为了实现特定算法,就必须要根据边的信息按照一定的顺序进行遍历。图的遍历算法是求解图的连通性问题、拓扑排序和求解关键路径等算法的基础。
Edison Zhou
2018/08/20
1.2K0
数据结构基础温故-5.图(中):图的遍历算法
文心一言 VS 讯飞星火 VS chatgpt (311)-- 算法导论22.2 9题
九、设$G=(V,E)$为一个连通无向图。请给出一个$O(V+E)$时间的算法来计算图$G$中的一条这样的路径:该路径正反向通过$E$中每条边恰好一次(该路径通过每条边两次,但这两次的方向相反)。如果给你大量的分币作为奖励,请描述如何在迷宫中找出一条路。如果要写代码,请用go语言。
福大大架构师每日一题
2024/08/16
1030
文心一言 VS 讯飞星火 VS chatgpt (311)-- 算法导论22.2 9题
文心一言 VS 讯飞星火 VS chatgpt (322)-- 算法导论22.4 3题
三、给出一个算法来判断给定无向图$G=(V,E)$是否包含一个环路。算法运行时间应该在$O(V)$数量级,且与$|E|$无关。如果要写代码,请用go语言。
福大大架构师每日一题
2024/08/16
930
文心一言 VS 讯飞星火 VS chatgpt (322)-- 算法导论22.4 3题
文心一言 VS 讯飞星火 VS chatgpt (301)-- 算法导论22.1 5题
五、有向图$G=(V,E)$的平方图是图$G^{2}=(V,E^{2})$,这里,边$(u,v)∈E^{2}$当且仅当图$G$包含一条最多由两条边构成的从$u$到$v$的路径。请给出一个有效算法来计算图$G$的平方图$G^{2}$。这里图$G$既可以以邻接链表表示,也可以以邻接矩阵表示。请分析算法的运行时间。如果要写代码,请用go语言。
福大大架构师每日一题
2024/08/16
970
文心一言 VS 讯飞星火 VS chatgpt (301)-- 算法导论22.1 5题
【愚公系列】2023年11月 数据结构(十四)-图
数据结构是计算机科学中的一个重要概念,它描述了数据之间的组织方式和关系,以及对这些数据的访问和操作。常见的数据结构有:数组、链表、栈、队列、哈希表、树、堆和图。
愚公搬代码
2023/11/13
3360
《JavaScript数据结构与算法》读书笔记
这本书让我回顾了一遍大学时候学的数据结构。数据结构和算法是程序员最喜欢也是最痛苦的部分,这本书很轻松的描述了这部分东西,是一本很不错的书。这篇文章记录书中的重点部分,并不会对书中所有的内容都复述一遍,如果希望了解更多的内容可以去看看这本书。由于ES5和ES6思想基本上是相同的,这里只记录ES6的实现。
kai666666
2020/10/19
4060
《JavaScript数据结构与算法》读书笔记
揉捻Map-疯狂Java
学编程的小程
2023/10/11
2470
揉捻Map-疯狂Java
推荐阅读
相关推荐
力扣 (LeetCode)-104. 二叉树的最大深度,图
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档