"Obsidian" Canvas on STEROIDS: Excalidraw 1.9.5 release

Summary

在这个视频中，Jolt介绍了Obsidian 1.9.5版本的新特性，特别是由Excalidraw插件团队带来的框架工具。这个工具允许用户将多个元素框选并作为一个整体移动，还可以调整框架的透明度和顺序。此外，用户可以插入来自The Vault的任何文件，包括文档、PDF、视频等，并以iframe的形式嵌入，这些嵌入的内容是可交互的。例如，可以编辑Kanban板，播放视频，甚至继续之前在Chat GPT中的对话。Excalidraw的主题会根据用户的设置自动适应Obsidian的主题，或者用户也可以手动设置。视频还展示了如何通过拖放操作将内容添加到文档中，以及一些快捷键的使用方法。Jolt强调这是一个最小可行产品发布，虽然功能强大但可能存在一些需要改进的地方，并鼓励用户反馈使用体验。

Takeaways

• 🖼️ 1.9.5版本更新主要围绕“框架”功能，允许用户在Obsidian中创建和管理各种元素的框架。
• 🔗 通过“更多工具”中的“框架工具”，用户可以框选多个元素，并对这些元素进行移动、设置透明度等操作。
• 📄 新增的“从库中插入任何文件”按钮允许用户将文档作为iframe嵌入Obsidian，支持滚动和编辑文档。
• 🔄 用户可以调整iframe的大小、旋转角度，并且可以设置边框颜色和圆角。
• 🎨 导入的文档背景色或主题将根据Excalidraw的主题变化，也可以在插件设置中选择让iframe匹配Obsidian的主题。
• 🔄 支持拖放功能，用户可以通过拖放将文件嵌入Obsidian，包括PDF、Markdown文件和视频等。
• 🔗 支持从互联网拖放内容，如YouTube视频和Twitter推文，直接嵌入Obsidian。
• 🌐 可以嵌入网页，例如Obsidian的网页，以及通过web embed功能嵌入其他应用，如Chat GPT的对话。
• 📝 用户可以在Obsidian中继续与嵌入的Chat GPT对话进行互动，实现研究和对话的无缝结合。
• 🚫 目前不支持将Excalidraw绘图作为iframe嵌入，但可以作为图像导入。
• 📝 所有在Excalidraw中的功能，如连接元素、添加关系线等，在Obsidian中嵌入后仍然可用。
• 📌 框架具有特殊性，即使有额外文本覆盖，框架也会始终显示在最上层。

Q & A

Obsidian 1.9.5版本主要更新了什么功能？

Obsidian 1.9.5版本主要更新了框架（frame）功能，允许用户框选元素，进行移动、设置透明度等操作。

Excalidraw插件团队为Obsidian添加了什么工具？

Excalidraw插件团队为Obsidian添加了框架工具（frame tool），通过这个工具，用户可以框选多个元素并进行集体操作。

如何将文档作为iframe嵌入到Obsidian中？

用户可以通过点击'insert any file from The Vault'按钮，选择文档并点击导入为iframe，从而将文档嵌入到Obsidian中。

在Obsidian中嵌入的iframe有哪些可调整的设置？

在Obsidian中嵌入的iframe可以调整大小、旋转、设置边框颜色、边框样式以及边框圆角等。

Excalidraw插件允许用户将哪些类型的文件嵌入Obsidian？

Excalidraw插件允许用户将PDF文件、Markdown文件、视频（如MP4）以及Kanban板等嵌入Obsidian。

如果用户希望嵌入的文档主题与Obsidian的主题保持一致，应该怎么做？

用户可以在Excalidraw插件设置中的显示（display）选项里，设置iframes与Obsidian主题相匹配。

用户如何通过拖放操作将文件嵌入Obsidian？

用户可以通过拖放文件到Excalidraw区域，并在Windows上使用Ctrl+Shift或在Mac上使用Control+Shift的组合键来将文件作为iframe嵌入。

Excalidraw插件是否支持从互联网上直接拖放内容到Obsidian？

是的，Excalidraw插件支持从互联网上直接拖放内容，如YouTube视频和Twitter推文，到Obsidian中。

在Obsidian中嵌入的Excalidraw绘图目前有哪些限制？

目前，Excalidraw绘图在Obsidian中只能作为图像嵌入，不支持作为可编辑的iframe嵌入。

Excalidraw插件的iframe功能是否支持深色和浅色模式的切换？

是的，iframe功能支持深色和浅色模式的切换，并且可以根据Excalidraw主题或Obsidian的主题进行调整。

如果用户在使用Excalidraw插件时遇到问题，应该怎么办？

如果用户在使用Excalidraw插件时遇到问题，应该首先检查GitHub上是否有相关报告，如果没有，应该提交一个新的issue报告。

Excalidraw插件团队对于iframe功能的未来发展有哪些计划？

Excalidraw插件团队计划在未来的更新中解决当前版本的一些粗糙边缘，并增加更多功能，如为文档添加预览等。

Outlines

00:00

🎉 介绍Obsidian 1.9.5版本更新

本段介绍了Obsidian 1.9.5版本的新特性，重点在于引入了框架工具。通过框架工具，用户可以框选多个元素，统一移动、调整透明度或进行其他设置。此外，还介绍了如何将文件从The Vault插入到Obsidian中，包括以iframe形式插入文档、PDF和Markdown文件，并允许用户编辑和滚动文档内容。提到了一个已知问题，即编辑文档时滚动到开头，但Obsidian团队承诺将解决。还展示了如何调整iframe的大小和旋转，以及如何通过命令面板快捷插入文件。

05:00

🖼️ 个性化iframe和文档显示

这一段讲述了如何个性化iframe的外观，包括设置边框颜色和边框样式。还介绍了文档的背景色和主题会根据Excalidraw的主题变化，用户也可以在Excalidraw插件设置中选择让iframe匹配Obsidian的主题。此外，用户可以在Markdown模式下打开文档，并通过front matter设置特定的formatter key来控制iframe的显示方式。

10:04

📄 拖放功能和网页嵌入

本段展示了如何在Obsidian中使用拖放功能来嵌入文档，包括从Obsidian内部拖放文件以及从互联网拖放内容。介绍了不同的快捷键组合用于在Windows和Mac上实现iframe的拖放。还探讨了如何嵌入YouTube视频、Twitter推文和网页，以及如何在Obsidian中继续进行Chat GPT对话或嵌入Excalidraw绘图。

15:06

🚧 目前不支持的功能和未来规划

这一段提到了一些目前还不支持的功能，例如将Excalidraw绘图直接嵌入Obsidian。作者说明了尽管存在一些未解决的小问题，但决定发布当前的功能集，以便用户可以开始使用，并根据反馈进行改进。同时，提到了在Obsidian中进行绘图和连接元素的能力，以及如何将这些元素嵌入到一个新的文档中，尽管某些元素目前只能作为占位符存在。

20:09

📝 结语和用户反馈邀请

在最后一段中，作者表达了对Obsidian和Excalidraw集成功能的兴奋之情，并认为这些功能将开启许多新的可能性。虽然当前版本是一个最小可行产品，可能存在一些需要改进的地方，但作者请求用户的耐心和反馈。作者鼓励用户分享他们如何使用这些集成功能，并表示对看到用户创造的解决方案非常感兴趣。

Keywords

💡Obsidian

Obsidian 是一款知识管理和笔记软件，用户可以用它来组织和链接信息。在视频中，它被用来展示如何通过插件扩展其功能，如添加框架和嵌入不同类型的文件。

💡Excalidraw

Excalidraw 是一个手绘风格的图形编辑器，可以集成到 Obsidian 中。视频中提到了如何将 Excalidraw 的功能和 Obsidian 结合，例如通过 iframe 嵌入图形和看板。

💡iframe

iframe 是一种 HTML 元素，用于在当前页面内嵌入另一个文档。视频中展示了如何将文档、视频、推文等作为 iframe 嵌入到 Obsidian 中，从而增强笔记的互动性和信息丰富度。

💡Kanban board

看板（Kanban board）是一种项目管理工具，用于可视化地追踪任务和工作流程。视频中提到了如何将 Excalidraw 的看板以 iframe 的形式嵌入到 Obsidian 中，实现在笔记应用内直接编辑看板。

💡Drag and drop

拖放（Drag and drop）是一种用户界面操作，允许用户通过拖动和释放来移动或放置对象。视频中介绍了如何在 Obsidian 中使用拖放功能来嵌入网页内容，如视频和推文。

💡Theme

主题（Theme）在视频中指的是软件的外观样式，包括颜色方案等。Obsidian 和 Excalidraw 都支持不同的主题模式，如浅色和暗色模式，用户可以根据个人喜好进行切换。

💡Plugin settings

插件设置（Plugin settings）是软件中用于调整插件行为和外观的选项。视频提到了如何通过 Excalidraw 插件设置来控制 iframe 的显示方式，比如是否与 Obsidian 的主题同步。

💡Markdown

Markdown 是一种轻量级的标记语言，用于编写格式化文本。在视频中，用户可以通过在 Obsidian 中打开 Markdown 文件来调整 iframe 的显示设置，如设置特定的背景颜色。

💡Web embed

网页嵌入（Web embed）是一种将网页内容嵌入到其他文档或应用中的方法。视频展示了如何使用 Obsidian 的 web embed 功能来嵌入如 YouTube 视频和 Twitter 推文等内容。

💡Minimum viable product (MVP)

最小可行产品（MVP）是指具有足够功能以满足早期用户需求的产品版本，以便快速推向市场并收集反馈。视频中提到了当前版本的 Obsidian 和 Excalidraw 插件是一个 MVP，意味着它可能还有待改进的地方。

💡GitHub

GitHub 是一个面向开发者的代码托管平台，常用于版本控制和协作开发。视频提到了如果用户在使用过程中遇到问题，可以访问 GitHub 查看或报告问题，以便开发者进行改进。

Highlights

Obsidian 1.9.5版本发布，专注于框架功能

通过Ex Collateral产品团队新增的框架工具，可以框选并统一移动多个元素

框架的透明度和层级可以调整，也可以将元素移入或移出框架

新增了从The Vault插入任何文件的功能，支持文档的iframe导入

iframe支持滚动、编辑，但已知问题包括编辑后滚动会回到开头

可以调整iframe的大小和旋转角度，但旋转时无法编辑文档

提供了设置边框颜色和圆角的功能

通过命令面板可以快速插入文件，支持自定义快捷键

支持将Markdown文件作为图片导入，PDF文件保持原有特性

可以导入Obsidian的Kanban板，并在Obsidian中直接编辑

支持MP4视频文件的导入并在后台播放

导入的文档背景色将根据Excalidraw主题变化，也可以设置为跟随Obsidian主题

可以在文件级别上通过格式化键控制框架的显示方式

支持拖放功能，可以通过特定的快捷键组合将文件作为iframe导入

提供了从互联网拖放导入视频和网页的功能

可以在Obsidian中嵌入并继续使用Chat GPT的对话

可以创建一个Excalidraw的web实例，并在Obsidian中直接使用

目前不支持将Excalidraw绘图作为iframe导入，但未来可能会支持

所有在Excalidraw中的功能在Obsidian中依然可用，如连接元素、添加组件等

框架总是位于顶部，即使有额外文本覆盖

将框架嵌入到文档中时，大多数元素将以占位符形式导入

这是一个最小可行产品发布，虽然稳定但存在一些边缘问题

作者鼓励用户反馈，以便在未来几周内改进解决方案

Transcripts

hey everyone jolt here I am super

excited about today's video and about ex

College raw obsidian 1.9.5

this is going to blow your mind

let me show you

the 1.9.5 release is all about frames

let me show you first the one that's

easier to demonstrate and that was added

to obsidian by the ex collateral product

team a couple of days ago

if you click here under more tools you

will see the frame tool if you click on

the frame tool you can simply frame a

number of elements and once these

elements are framed you can move those

frames together and you can do all sorts

of settings on the frame for example you

can change the opacity of the frame or

you can bring frames back and forth you

can also simply move items out of the

frame

or into the frame as well as with the

right click you can remove all elements

in the frame or select all elements in

the frame or just simply delete the

entire frame I'm going to do that now

so now let's move on to the truly

exciting stuff you will notice that

there's a new button here this is the

insert any file from The Vault button if

I click this then this dialog box will

open up I can just type in the name of

the document secure enough I can select

which section I want to open trust no

one and I can click here to import it as

an iframe and when I do that then an

iframe is created if I click here then I

can scroll in the document and if I

click again then I can edit the document

right now then I edit

the

document Scrolls to the beginning this

is a known issue I'm

have a promise from the obsidian team

that this is going to be resolved

now of course you can also resize this

if you want you can even rotate it if

you want now if you rotate you can read

the document but you cannot edit the

document when rotated so to rotate it

back you need to hold the shift key and

rotate it to a horizontal position you

can also do some settings if you like

you can add a stroke color maybe around

this and you can make the corners round

if you want and this way I've formatted

my document and I can put this to the

side now if I use the command palette

now and type in any then you will see I

have this action as well so you can

assign a hotkey for yourself I will

click insert any file from The Vault and

I'm going to look for a PDF file how to

read a paragraph I'm going to press

enter

again you will notice that previously as

well there were two buttons so still you

can also import a markdown file as an

image and also with a PDF document you

can import it as a PDF which will have

all its create features I'll include a

link here in the video that explains how

the PDF import feature works because I

think that's also super super super

useful but now I'm going to show you how

to import this as an iframe so when I

click here to import it as an iframe

then now it's not a big surprise it is

going to be very similar so if I click

here I can scroll in the document and

this is I think a pretty good works very

well now I think the fun stuff starts

here so let me again bring up the insert

any file from The Vault and let's look

at our demo kombbomb board so you can

also import an obsidian comb board and

I'm going to import this as an iframe

and this time I'm going to make this

just slightly bigger I'm going to maybe

move down to here and the nice thing is

that this compound board is actually

fully functional so if I click here I

can move maybe this card to here I can

move this card to here and with this I'm

able to edit my kanban board on the Fly

here within obsidian

and similarly I can show you that also

from your Vault you can import

and the other file I didn't try that

many things but I tried MP4s so I don't

have many videos in My Demo Vault this

is from an old blog post but again if I

import this as an iframe then you will

see it is not perfect so the size of the

frame is not perfect but I can click

here and start playing and now this

video is playing in the background and

again I can just set the Border color

to whatever I want and or the border and

also the Border color if I want to

change it so this is now here and nice

now the color the background color or

the theme of the documents that you

import will depend on your Excalibur

theme so right now I'm using excaled raw

in light mode if I switch to dark mode

then you will see that all of the

documents and everything

was and now turned to the Dark theme

also you can control this so if

regardless of the theme of the document

you would rather follow the theme of

obsidian there is a setting in excalil

draw plugin settings under display and

here under display you can change this

that iframes should match the obsidian

theme so if I turn this off and come

back then everything is going to be dark

but the background is going to be light

because this is my excalator theme

now also you can override this on a file

level you need to open the document in

markdown mode and you can add a

formatter key to control how the frames

are displayed so this case I'm going to

open the

drawing as a markdown document and here

in the front matter I'm going to

Type X colored raw iframe and you can

see there are four values you can set

this to dark light Auto and default

default means it follows your obsidian

theme Auto is automatically adjusted to

the excalator theme and if I set this to

light as fixed so I'm going to

set this to light then regardless of my

plugin settings the frames are going to

be loaded with by light themes

so now let's look at also drag and drop

because drag and drop also works so I'm

going to just take this document right

here and I'm going to drop it here but

before I drop it notice the tool tip

there it says insert link and try shift

Control Alt combinations to to find out

the drop actions on Windows you need to

press Ctrl shift to insert something as

an iframe so now I'm holding the mouse

button I'm dragging this file and as I'm

dragging it then I'm over the excalator

area where I want to drop it I press

Ctrl shift and I let go the mouse button

and then my document is imported like

this now I can also show you the

key combination so there are you will

find this table in the X call it role

readme I'll show you in just one second

there that is but here you can see that

there are two new key combinations so

combination number one

is when you're

dragging and dropping a file from within

obsidian and here I just showed you that

on Windows it's Ctrl shift on a Mac it's

the control button and then it will drop

it as an iframe and when we drop this

from the internet then it's Ctrl shift

and Ctrl shift on both Mac and windows

I'll show you in just a second how that

works and as I promised so this table is

available in the X collateral readme you

will find the X College row read me if

you open settings you go to community

plugins you search for X colored raw

here and you click on X color draw

then this will open the readme and if

you scroll down in the readme you will

find this table right here so anytime

you need to get back to this you will

find it here so getting back to our

story I'm going to minimize this so

let's look at some of the web drag and

drops so let's start with this example

that I have a YouTube video that I want

to bring in here so I'm going to grab

the YouTube video and I'm going to just

uh

move it over X color draw and then I'm

going to press Ctrl shift to drop it in

here and with that the video is in

and of course as you would expect if you

click the center it's going to start

playing and you can see it has a

thick border which means that the video

is active so you can now move in the

video if I click anywhere out then the

video is no longer I mean the video is

playing but it's no longer active so you

can resize it if you want or

and do any other Transformations maybe

you can rotate this as well if you click

the center again then it will stop and

if you click it again then it will

continue so this I think is pretty

useful when you're taking notes on a

video in X colored row and you just want

to start and stop the video now moving

on from a video let me show you how this

work with a Twitter tweet so for example

I want to bring this tweet into my

document I can click here to share the

tweet I can copy the link to the tweet

and I can come here and I can just

simply paste the tweet and when I paste

the Tweet so I select it paste then the

Tweet was imported and I can interact

with the tweet I can also again enlarge

the Tweet if I want to so this becomes

here another and interactive document

and also I can bring in web pages so let

me just show you another way to do this

now this is going to be the obsidian web

page so I can just simply drag the web

page Ctrl shift and I can drop the web

page in here and now I have the obsidian

web page here I think a cool feature and

it's

sort of the consequence of being able to

embed and this will only work in

obsidian desktop this way in obsidian

mobile I think the full feature will not

be available but let me show you what I

mean so you can also

use applications that need an identity

so this is my chat GPT account and what

I want to do or show you is a new

feature in chai GPT is you can

share a chat so I'm going to copy the

link to this chat

and once I've copied the link to the

chat I'm going to now use the web embed

feature this is I could just simply

paste the link here as I did in the

other cases I just want to show you

another way of creating a frame so I can

click here on web embed I can create an

empty embed form and I'm just going to

Simply paste the link here that I picked

up from chai GPT and when I press enter

then this dialog is imported so you can

see here that this is my discussion of a

chai GPT and if I click here to continue

conversation then I can actually

continue my conversation so imagine the

use case that you're doing some research

you insert your chain GPT conversation

here you do a mind map around it and

whenever you have additional questions

you can just continue that conversation

and that conversation is going to be

saved here that you're drawing

another example would be and this is I

think just for the fun of it but there's

also a cool additional feature that I'll

talk about in a next video that

you can do with this but here if I

create another web frame and now I'm

going to

just simply type excalator.com then what

you will see here is this is now a web

instance of EX College row that was

imported and actually if I click here

then this instance is going to work just

as your normal web instance of X call it

robot so you can actually have an

embedded x-colored raw drawing and you

can

also sort of embedded here now this

brings me to a point that

right now is deliberately not supported

so here if I click to add a document and

I choose maybe Boston box

X College Raw

this one here then this is an ex College

roll drawing that I can only import as

an image so this is now imported as an

image I will eventually come to a point

where you can embed an excluded drawing

in a similar way within obsidian right

now there were some minor issues and I

decided that for now I would rather

release this set of features to you

instead of trying to work out all the

nitty-gritty details of every single

piece of functionality

so

and then when you have everything here

or you've moved your items in here of

course everything that works in X

collateral still works here so I can

connect these items with one another

maybe like this I can add a

curved line I can add a relationship

now this text is a bit small and I

probably mistyped a relationship but

anyway you can see that you can connect

items you can also add various

components around these so I can add

this box for example here and I can also

simply add

additional

text

and so on so this now

of course the spelling

spelling is not great as I'm just trying

to do all of this here on the fly but

you get the idea so you have a full

featured let's call it raw

canvas

plus all of these embedded active

elements

now there is a bit of

special feature of these frames and a

special feature is that here I have

additional text that is covered by this

Frame even if I bring additional text to

the front the frames are always going to

be on the top so that is currently a

limitation

also if I embed this whole thing into a

document so let me just create a new

empty document right here and let me

just drag this in here and embed it

like this you will see that everything

is embedded with a let me just make this

larger

going to make this

big like this so you will see that all

of these items were imported but we only

have placeholders

for most of the things this is going to

stay as is for some of the items like

the dose for example I hope to be able

to add a preview later on but again this

is something on the roadmap does not

work for now

so that's all I wanted to share with you

today I hope you're as excited about all

of this as I am I think this is really

mind-blowing and opens so many

opportunities for excalator and obsidian

this is a minimum viable product release

I think it works stable it does the job

but there are a number of rough edges

some things don't always work as

intended so I ask for your patience if

you find something check GitHub if no

one has reported it please report it

I'll try to refine this solution over

the next couple of weeks but I thought

that I've been working on this for the

better part of the last month and I

thought that instead of continuing to

work in the background on this I would

release it let you use it and continue

to work based on your feedback so enjoy

and let me know how it all works out I'd

be very interested to hear

the type of solutions that you can

create with this if you create a YouTube

video or if you post on Twitter or you

post in Discord or you share in the

comments below I'd love to see what you

do with excalator obsidian using these

integration features

thank you