[obsidian] 머메이드 다이어그램 크기 조정하기

 

obsidian 머메이드 다이어그램 크기 조정하기

Obisidian에 머메이드 다이어그램을 그려 넣었다면, 이 설정은 반드시 해두자.

그림의 크기를 드래그하여 원하는 크기로 키웠다 줄였다 할 수 있다.

원문은 아래 포럼에서 발견하였다.

https://forum.obsidian.md/t/ability-to-resize-and-align-mermaid-diagrams/7019/21

본문에 인용된 설정은 아래와 같다.

svg[id^="m"][width][height][viewBox] {
    max-width: 95%;
    max-height: 95%;
}

div.mermaid {
    margin-left: 0 !important;
    text-align: center;
    resize:both;
    overflow:auto;
    margin-bottom: 2px;
    position:relative;
    max-height: 600px;
    max-width: 100%;
}

div.mermaid::after {
    content:'';
    display:block;
    width:10px;
    height:10px;
    background-color:yellowgreen;
    position:absolute;
    right:0;
    bottom:0;
}

 

반응형

 

설정 방법

이 설정을 하려면, 기본적으로 커스텀 CSS 설정을 먼저 활성화해야 한다.

아래 글을 참고하여, 커스텀 CSS 설정을 완료한다.

[obsidian] 커스텀 CSS 사용하기

그 CSS 파일에, 위의 코드를 복사한다.

그리고 나서, 원래의 머메이드 다이어그램에 다시 가보면 우측 하단에 드래그 할 수 있는 표시가 생기고, 그 부분을 드래그 하면 크기를 조정할 수 있게 된다.

 

resizing 전

resizing 후

 

더 보기

[obsidian] 커스텀 CSS 사용하기

[obsidian] 코드로 간트차트(Gantt) 작성하기

[obsidian] templater 플러그인 - 문서 템플릿 도우미

[obsidian] emoji 플러그인 (emoji toolbar)

[obsidian] kanban (칸반) 플러그인

[obsidian] task 플러그인 - 할 일 관리

[obsidian] advanced tables 플러그인 추천

[obsidian] admonition 플러그인 - 위키처럼 꾸미려면?

[obsidian] MindMap 플러그인

[obsidian] PlantUML 플러그인

[obsidian] 즐겨찾기 - starred

[obsidian] URL 복붙을 쉽게 해주는 플러그인 추천

[obsidian] 목차(Table of Contents) 플러그인 사용하기

[obsidian] 아웃라이너(outliner) 플러그인 추천

[책리뷰] 제텔카스텐 - 글 쓰는 인간을 위한 두 번째 뇌

사람이 생각하는 법을 닮은 툴 - Roam Research와 Obsidian

PC/ 모바일에서 obsidian 동시 사용하기

logseq와 obsidian에서 호환되는 마크다운 문법?