Obsidian 插入Mermaid图太大的解决办法

继续猫着

已于 2024-09-18 10:44:11 修改

阅读量5.8k

点赞数 4

分类专栏： mermaid obsidian 文章标签：前端笔记

于 2023-09-14 10:20:57 首次发布

本文链接：https://blog.csdn.net/weixin_42109248/article/details/132870319

版权

mermaid图进通过一行行命令就可以自动生成流程图、序列图、类图、git图等图表，大大节省了绘制这类图的时间，官方的在线编辑器大概长这样：

Online FlowChart & Diagrams Editor - Mermaid Live Editor

目前obsidian已经原生支持了几乎所有的mermaid图类型，但是如果画的图太大了就会超出范围，显示不完：

最近偶然发现新版blue topaz主题能够通过给插入的图添加横向滚动条的方式让图显示完全，所以找到主题文件夹中的theme.css中这一段:


/*======== optionnal mermaid style below ========*/
.markdown-source-view.mod-cm6 .cm-content > [contenteditable=false] {
  overflow: auto;
}

body.resizable-mermaid .mermaid {
  resize:

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

继续猫着

关注关注

4
点赞
踩
5

收藏

觉得还不错? 一键收藏
4
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Mermaid 流程图

u010669626的博客

03-07

772

用于在 html，也在 Mermaid 表示一个空格。obsidian apk下载办法_obsidian安卓版下载-CSDN博客。下载 obsidian。

mermaid画流程图的局限性

anddyhua's Cookbook

04-20

860

缺点：子图文本说明的位置只能置顶居中，不能置底输入框文本不能环绕和外嵌同子图内（框内）流程图不能对齐 #mermaid-svg-2GLyWbJIV5prJuMG .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#333;color:#333}#mermaid-svg-2GLyWbJIV5prJuMG .label text{fill:#333}#mermaid-sv

4 条评论您还未登录，请先登录后发表或查看评论

hexo使用mermaid画图过于宽,去滚动条办法。框内汉字换行的解决方案

雪糕的博客

04-14

1510

使用typoa画图会发现部署到页面上之后太宽有左右的滚动条是因为配置的时候没有配置全引入相关的js文件找到主题里面的页脚文件，也即 themes/next/layout/_partials/footer.swig ，在文件最后追加以下内容 {% if (theme.mermaid.enable) %} <script src='https://unpkg.com/mermaid...

在obsidian中如何让mermaid渲染出的图美观布局合理

最新发布

形上得其象，形下合于数；阴阳自济，玄理自明。

04-08

1165

作为一名商业数据分析师，需要将数据洞察以清晰、专业、美观的图表形式呈现出来，即使是在笔记软件中。Obsidian 中的 Mermaid 是一个强大的工具，但要达到“商务级别”的输出，却需要一些额外的技巧和配置。通过结合使用这些方法，可以在 Obsidian 中创建出布局合理、视觉效果专业、满足商务报告和演示需求的高质量 Mermaid 图表。关键字（如果图表类型支持）或在 Obsidian 笔记中图表上方添加清晰的标题和说明。这是最强大、最灵活的方法，可以让你精确控制 Mermaid 图的每一个细节。

Mermaid 子图 + 拖拽缩放：让流程图支持无限细节展示

03-13

1667

在技术文档、项目管理和可视化分析中，流程图是传递复杂逻辑的核心工具。传统流程图往往静态且难以适应细节展示，而 Mermaid 与 svg-pan-zoom 的结合，则为这一痛点提供了完美解决方案。本文将深入解析如何通过 Mermaid 的子图（subgraph）实现模块化分类，结合 svg-pan-zoom 的缩放拖拽能力，构建可交互的流程图系统。Mermaid 是一款基于文本的图表生成工具，通过简单的语法即可创建流程图、时序图、类图等。其最大亮点在于功能，允许开发者将节点按逻辑分组，形成层次化结构。

obsidian中Mermaid语法——流程图（flowchart）

harry0936的博客

12-26

1万+

流程图由节点（几何形状）和边（箭头或线）组成。Mermaid 代码定义了如何创建节点和边，并适应不同的箭头类型、多向箭头以及与子图之间的任何链接。

Mermaid修改流程图大小

热门推荐

Dexter's Laboratory

04-23

1万+

Gayhub上发现个web绘制流程图的宝藏repo: Mermaid 先存一下Live Editor: https://mermaid-js.github.io/mermaid-live-editor 具体的使用方法看官方文档就行了: https://mermaid-js.github.io/mermaid/ 也可以参考平头某的这篇文章总结的不错: https://blog.csdn.net/fenghuizhidao/article/details/79440583 画好流程图之后想要调整一下图的大小,

Obsidian将复制过来的图片大小进行改变

Allen_cats的博客

03-17

8525

超简单的更改Obsidian中图片大小的方法

作图笔记 - mermaid的字体大小设置

sz66cm 学习随笔

06-28

7734

mermaid 作图代码作图字体大小

如何在Obsidian中绘图

m0_72724339的博客

10-07

1万+

安装后设置快捷键，可快速打开当前文档的思维导图模式视图。一级标题将作为作为思维导图中心节点，其他次级目录及标题内容将作为子节点插入。Mermaid 是一款通过文本生成图表的开源 [[JavaScript]]工具，能够快速制作流程图、序列图等等。使用第三方插件[[Excalidraw]]，即可在Obsidian中绘制手绘风格的矢量图。然后根据需求实现图表。中的内容，再做案例。

Obsidian 常用的插件

06-05

Obsidian 常用的插件

Lightbox插件（图片大小调节）

11-01

Lightbox图片插件（图片大小调节）很实用，可以轻松实现图片显示功能包括上一张下一张

在Obsidian中插入目录的解决方案

Dys_debug的博客

06-07

2705

使用Dynamic Table of Contents插件在Obsidian中插入目录

obsidian mermaid

03-23

Obsidian是一款基于Markdown的笔记软件，支持多种插件，而Mermaid是一种用于生成流程图、序列图等图表的技术。用户可能已经知道Markdown的基础，但需要指导如何集成Mermaid到Obsidian中。接下来，我需要检查系统级...

obsidian图片插入

03-25

用户的问题是如何在Obsidian中插入图片，所以应该涵盖基础方法和使用插件的方法。需要分步骤说明，确保结构清晰。首先介绍基础方法，即使用Markdown语法直接插入本地图片，然后介绍使用Imgur插件的方法，可能还有...

obsidian插入图片

06-04

要在 Obsidian 中插入图片，可以使用以下两种方法： 1. 拖拽法：将图片文件直接拖拽到 Obsidian 窗口中，或者将其拖拽到已经打开的笔记页面中即可。 2. 内联法：在笔记中使用 Markdown 语法 `![]()` 插入图片。...

Markdown 文件中使用Mermaid绘制状态关系图

慕羽★的博客

01-04

1509

Mermaid 是一种基于 Markdown 的可视化图表工具，支持绘制流程图、状态图、甘特图等。**Mermaid**也是 Obsidian 支持的图表绘制语言之一，可以直接在 Obsidian或者其他软件、网页等创建的Markdown 文件中编写 Mermaid 代码来生成状态转换图。比如在 Obsidian 中打开或创建一个笔记或者在CSDN中的Markdown编辑器中，插入 Mermaid 代码块，并添加状态关系图的代码后，保存文件后，Obsidian 或者CSDN编辑器会自动渲染出关系图，切换至阅

obsidian中Mermaid语法——UML类图 (Class Diagram)

harry0936的博客

03-18

4115

使用关键字class，如会定义Animal类。通过关系，在一次定义中同时定义两个类及其关系。例如，。fill:#333;stroke:1;fill:none;important;important;important;important;important;important;important;important;important;important;important;important;important;important;important;important;Animal。