轻盈绘图的Excalidraw插件 | Obsidian实践

朋友们,你们的Obsidian彩虹屁狂魔重新上线。从这篇Obsidian实践开始,我想跟大家陆续分享一下,Obsidian中那些让人眼前一亮的宝藏插件。

原本我想从逻辑上最基础,使用上最简单的插件讲起,然鹅,请原谅我实在按捺不住自己迫切的心情,想把Excalidraw插件不由分说地推荐给你。为啥呢?

聪明如你大概已经注意到,【见睿思齐】的插图风格,已经从原先这种呆板的Vision风:

8a02f423d716661ef6285bdd9727ed08.png

变成了最近常用的这种清新优雅的手绘风:

7c9a9caac901a2b6084534c16a8d34cc.png

屏幕截图上也添加了这种随性又好看的标注:

0d0286fc32cdad58ca886dce2f0c3c91.png

你可能会以为,我必然会花费了很多时间和精力,专门对图片进行了优化,实际上,借助Excalidraw插件的帮助,不仅风格上得到了很大的提升,甚至连在Obsidian笔记中添加、编辑、管理,以及分享图片,都要比Visio时代更加方便——可谓“一气呵成”,简直不要太爽。

所以今天就来聊聊,Obsidian作图必用的宝藏插件——Excalidraw。

0576a5fee217d05a637784a86ccb3cd5.jpeg

什么是Excalidraw插件

Excalidraw是一款开源的在线白板工具,可以直接在浏览器打开,绘制具有手绘风格的图形。Excalidraw基于Markdown语法实现绘图功能,不仅简洁轻量,还可以和采用Markdown编辑器的工具集成,实现各种特色功能。就比如,Obsidian的Excalidraw插件可以完美支持反向链接。

81e86bbeb7a88a02f8b39d37ac3bd8f9.png

Excalidraw绘图(左)与Markdown文件(右)

安装Excalidraw插件

Excalidraw插件属于第三方插件。

如果你是第一次安装第三方插件,并且,如果你在国内使用Obsidian工具,那么,由于我国国情对于访问外国网站有所限制,安装插件可能会有一些麻烦。

如果你不是第一次安装第三方插件,或者,如果你在国外使用Obsidian工具,那么,直接到社区插件市场,浏览、安装、启用Excalidraw插件就可以了。

具体操作就不展开说明了,可以参考前文:如何安装Obsidian插件 | Obsidian实践

创建Excalidraw绘图

在Obsidian工具创建Excalidraw绘图可采用以下3种方式:

  • 工具栏:使用默认方式创建绘图。

  • 命令面板:调用Excalidraw命令,根据实际应用场景,选择适当的方式创建绘图。 

  • 快捷键:选择1种常用的创建方式,设置为快捷键。——这是我的选择。

使用工具栏

使用工具栏创建Excalidraw绘图的操作非常简单:单击【新建Excalidraw绘图】按钮,即可创建Excalidraw绘图。

aa8e0006201917bfafbf08fe7ea6b8cd.png

但缺点同样不容忽视:

  • 在默认路径创建绘图,可能需要进一步整理;

  • 在面板中创建绘图,视野狭小;

  • 绘图独立于笔记,需要手动嵌入笔记;

  • 绘图以数字序号命名,难以识别检索。

使用命令面板

使用命令面板,可以浏览并执行Excalidraw插件的全部命令:

  1. 单击【打开命令面板】按钮;

  2. 输入关键字【Excalidraw】,筛选Excalidraw插件相关命令;

  3. 根据实际应用场景,选择适当的命令创建Excalidraw绘图。

4ff96726ebbd912ff0616a9d4029f41c.png

大家可以尝试各种创建绘图的方式,并结合自己的使用习惯和使用场景,选择适当的创建方式。

我个人比较喜欢且常用的创建绘图的方式是:【Excalidraw:新建绘图-于新窗口-并将其嵌入(形如![[drawing]])到当前文档】。

在编辑Obsidian笔记过程中,需要创建绘图时,执行该命令即可:

  • 将新建绘图,并直接嵌入到笔记的当前位置,无需手动嵌入;

  • 绘图文件保存至既设的附件存储路径,符合个人管理习惯;

  • 绘图文件名称包含笔记名称为前缀,体现出绘图与笔记的关系,便于查询。

使用快捷键

为了更方便地使用Excalidraw插件,我将常用的Excalidraw命令【Excalidraw:新建绘图-于新窗口-并将其嵌入(形如![[drawing]])到当前文档】设置为快捷方式【Ctrl+Alt+E】:

  1. 单击【设置】按钮;

  2. 选择【快捷键】页签;

  3. 输入【Excalidraw:新建绘图】关键字,筛选Excalidraw插件新建绘图相关命令;

  4. 将【Excalidraw:新建绘图-于新窗口-并将其嵌入(形如![[drawing]])到当前文档】命令设置为快捷方式【Ctrl+Alt+E】命令设置快捷键【Ctrl+Alt+E】。

da792f543be3d269b51bff4047403cc8.png

设置完成后,在编辑Obsidian笔记过程中,如需插入图片,按快捷键【Ctrl+Alt+E】,即可创建Excalidraw绘图,并打开新窗口进行编辑。编辑完成后显示结果如下:

  1. 绘图文件在既设路径下保存,且绘图名称包含所在笔记名称【Excalidraw插件】作为前缀。

  2. 绘图已插入到当前笔记。

5062793904c409b4ed703d61c8745df2.png

导入Library绘图元素

虽然Excalidraw插件仅提供了非常有限的绘图元素,但实际上,开源社群提供了丰富的Library绘图元素可供下载使用。具体操作说明如下:

1. 在Excalidraw插件编辑窗口,单击【Library】按钮;

2. 单击【Browse libraries】按钮,打开【Excalidraw Libraries】页面;

7ba9ae52ea90e6d7577fb5e943fb9ef7.png

3. 浏览并选择喜欢的图库,单击【Download】按钮,将图库文件(*.excalidrawlib)下载到本地;

7cb07987925b77ed7a9e1894ad24ba1b.png

4. 单击【Load】按钮;

5. 浏览并选中已下载的图库文件(*.excalidrawlib);

322f4d176fc03bd9296c4289696de903.png

6. 单击【确认】按钮,即可加载、使用图库中的绘图元素。

f68002eb25b7198fb137bb6f1a4833c1.png

导出PNG文件

Excalidraw绘图可导出为PNG和SVG格式的文件。以导出PNG文件为例:

  1. 单击【更多选项】按钮;

  2. 选择【导出PNG到当前目录】选项,即可生成与原Excalidraw绘图同名的PNG文件。

3c2ea41c21babf268ccfdf02688d9b52.png

生成数据图表

从Excel复制数据,粘贴到Excalidraw绘图,可自动生成数据图表。

88a06fd22345f488e9eb63e556fe822a.png

总结

今天的分享就是这些内容。

其实,Excalidraw插件的功能和设置还有很多,在这里仅选择了一些个人比较喜欢,和已经实现的部分,简单介绍。有兴趣的朋友可以多玩玩儿,根据个人喜好,调试出独属于你自己的Excalidraw。

相关文章:

Obsidian,知识管理与笔记写作法 | Obsidian实践

卡片笔记,一个不断增长的外部思想库 | 读书

介绍:Obsidian工具编辑/管理永久笔记 | Obsidian实践

写作:Obsidian深度实践经验分享 | Obsidian实践

写作:如何借助Obsidian工具记录读书笔记,并写作一篇书评 | Obsidian实践

使用:如何安装Obsidian插件 | Obsidian实践

使用:如何实现Obsidian笔记云同步? | Obsidian实践

使用:如何在手机端实现Obsidian笔记云同步 | Obsidian实践

使用:OCR工具辅助记录Obsidian笔记 | Obsidian实践

撒花:Obsidian V1.0.0里程碑版本发布了 | Obsidian实践

其他推荐:

实施:GitHub + MarkDown 文档系统的工作环境部署及工作流程说明 | 技术传播

d35255c6d1e4cea27db71d0821ad94c3.jpeg

技术传播是一片蓝海 | 技术传播

访谈:TC无处不在,只是我们没有发觉 | 技术传播

这次他们说好要“讲真的” | 传播

在座都别吵了,你们还有我 | 技术传播

一本培养强迫症患者的说明书 | 技术传播

就像用心做好日本料理 | 技术传播

顽固的老头子与无聊的说明书 | 技术传播

转战新媒体 | 技术传播

评测:王者荣耀的用户帮助系统 | 技术传播

让爸爸妈妈也能享受到科技发展带来的便利 | 技术传播

企业级信息管理系统初创方案构思 | 技术传播

 437bf4c4a675c8c6c44ce279dea9ae27.png

睿齐

技术传播从业者

品牌内容策划

自由摄影师

自由撰稿人

汪力迪

公众号:techcomm / htstory

微信号:bgrichi

邮箱:[email protected]

7df146fc064aa9ff4d7202d060e06872.jpeg

猜你喜欢

转载自blog.csdn.net/BGRichi/article/details/128031375