Excalidraw di Obsidian: Diagram Gambar Tangan dalam Catatan

Seperti yang telah disebutkan, file Canvas berformat .canvas dan terpisah dari file .md—mereka perlu dikelola secara mandiri dan tidak dapat digabungkan dengan catatan dalam satu file. Bab ini memperkenalkan alat yang mengatasi masalah ini: plugin Excalidraw.

Apa itu Excalidraw dan Bagaimana Perbedaannya dengan Canvas?

Apa itu Excalidraw?

Excalidraw adalah alat menggambar online gratis dan sumber terbuka dengan versi web mandiri (excalidraw.com) yang dapat Anda gunakan langsung di browser tanpa perlu mendaftar. Gaya gambar tangannya sangat cocok untuk diagram alur, peta pikiran, diagram arsitektur, dan konten serupa.

Di Obsidian, kami menggunakan versi plugin pihak ketiga—dikelola oleh pengembang komunitas, bukan oleh Obsidian resmi, sehingga perlu diinstal secara manual. Fitur intinya sama dengan versi web, tetapi dengan integrasi yang lebih dalam dengan Obsidian.

Perbedaan dengan Canvas

Keduanya tampak seperti “menggambar di atas kanvas”, tetapi format file sangat berbeda, itulah perbedaan inti:

• Canvas: Menghasilkan file .canvas. Ini adalah file JSON mandiri yang ada secara terpisah dari catatan .md Anda dan perlu dikelola secara mandiri.
• Excalidraw: Data gambar dapat dikompresi dan disematkan di akhir file .md—satu file, teks dan gambar hidup berdampingan, tidak perlu pengelolaan terpisah.

Kedua tangkapan layar di bawah berasal dari file yang sama:

Inilah mengapa saya merekomendasikan Excalidraw: ketika Anda membuka file, Anda melihat teks; dengan sekali beralih, Anda melihat gambar. Kedua jenis konten dalam satu tempat.

Menginstal Plugin Excalidraw

Excalidraw adalah plugin pihak ketiga dan perlu diinstal secara manual.

Jalur: Pengaturan → Plugin pihak ketiga → Plugin komunitas → Cari “Excalidraw” → Instal → Aktifkan

Setelah instalasi, aktifkan plugin, dan Anda akan melihat ikon Excalidraw muncul di sidebar kiri.

Membuat dan Menggunakan Excalidraw

Cara Membuat File Baru

Ada dua cara:

1. Palet Perintah: Cmd+P (Mac) atau Ctrl+P (Windows), cari “Excalidraw: New Drawing”, tekan Enter.
2. Sidebar Kiri: Klik ikon Excalidraw untuk membuat yang baru secara langsung.

Secara default, file baru dibuat sebagai .excalidraw (bukan .md). Jangan khawatir—cara menjadikannya bagian dari file .md adalah fokus dari bagian “Dua-dalam-Satu” nanti.

Operasi Umum dan Pintasan

Di bilah alat Excalidraw, setiap alat memiliki nomor yang ditampilkan di bawahnya—itulah tombol pintas. Tekan nomor untuk mengganti alat secara langsung tanpa mengklik bilah alat:

Satu fitur tambahan dibandingkan dengan Canvas: Excalidraw memiliki alat Tangan Bebas khusus (pintasan 7) yang memungkinkan Anda menggambar bebas dengan mouse atau trackpad—sesuatu yang tidak bisa dilakukan Canvas.

Alur Kerja Keyboard: Menggambar Tanpa Meninggalkan Keyboard

Excalidraw juga mendukung alur kerja keyboard murni, bagus untuk membuat node dengan cepat, menghubungkannya, dan menulis konten:

Navigasi Dasar (dalam mode Seleksi):

Menambahkan Konten ke Kanvas

Bentuk dan Teks: Pilih bentuk dari bilah alat dan klik pada kanvas untuk menggambarnya. Dengan alat teks, klik dan mulailah mengetik—dukungan bahasa Indonesia dan lainnya.

Koneksi Panah: Saat persegi panjang dipilih, arahkan kursor ke tepinya untuk melihat titik koneksi hijau. Seret panah dari salah satu titik ini ke bentuk lain, dan panah akan menempel.

Catatan yang Ada: Seret catatan langsung dari pohon file Obsidian ke kanvas Excalidraw—catatan akan disematkan sebagai kartu pratinjau catatan.

Gambar: Seret file gambar ke kanvas untuk menampilkannya secara langsung.

Poin Penting! Menggambar Excalidraw dengan AI

Mirip dengan bagian “Menggambar Canvas dengan AI” sebelumnya, Excalidraw juga dapat langsung dihasilkan oleh Claude Code.

Latar Belakang

Kami telah memperkenalkan Claude Code dan sistem Skill sebelumnya. Canvas menggunakan Skill json-canvas, dan Excalidraw juga memiliki Skill khusus: excalidraw-diagram. Tentu saja, ada banyak MCP dan Skill seputar Excalidraw—Anda dapat memilih sesuai kebutuhan.

Skill ini dibuat oleh axtonliu dan open-source di GitHub:

https://github.com/axtonliu/axton-obsidian-visual-skills/tree/main/excalidraw-diagram

Setelah diunduh, letakkan di direktori ~/.claude/skills/, sama seperti Skill lainnya.

Skill ini menghasilkan file .excalidraw mandiri, cocok untuk skenario di mana Anda hanya membutuhkan gambar dan tidak ingin mencampurnya dengan teks catatan.

Jika Anda ingin menyematkan gambar langsung di dalam file .md (format dua-dalam-satu yang dijelaskan nanti), saya telah menulis Skill yang diperluas: obsidian-excalidraw, khusus untuk tujuan ini—hasilnya dikompresi dan disematkan di akhir file .md, tanpa membuat file tambahan. Kedua Skill ini memiliki tujuan yang berbeda; pilih sesuai kebutuhan.

Cara Menggunakan

Di Claude Code, ketik /excalidraw-diagram, pilih Skill ini, tekan Tab, lalu jelaskan apa yang ingin Anda gambar. Claude Code akan menghasilkan file Excalidraw yang sesuai.

Demo Langsung

Saya menggunakan konten bab ini sebagai demo—saya memberi tahu Claude Code: “Gambarkan diagram alur struktur bab dari konten Excalidraw ini, yang menunjukkan hubungan antar bagian.”

Claude Code membaca konten dan secara otomatis menghasilkan diagram struktur, langsung disematkan di akhir file .md. Beralih ke mode Excalidraw untuk melihatnya. Tidak perlu menyeret node atau menghubungkan garis secara manual—jauh lebih cepat daripada menggambar dengan tangan.

Poin Penting! Menyematkan Excalidraw ke dalam File .md (Dua-dalam-Satu)

Mari kita perjelas: Secara default, plugin Excalidraw membuat file .excalidraw, yang terpisah dari file .md dan perlu dikelola secara mandiri, sama seperti Canvas.

Fitur “dua-dalam-satu” bukanlah perilaku default; ini memerlukan konfigurasi tambahan. Setelah dikonfigurasi, file baru akan berformat .md, dengan data gambar dikompresi dan disimpan di akhir file, sehingga keduanya hidup berdampingan dalam file yang sama.

Canvas tidak bisa melakukan ini, tetapi Excalidraw bisa—setelah konfigurasi, file .md yang sama dapat berfungsi sebagai catatan biasa dan papan gambar, semuanya dalam satu file. Ini adalah bagian paling berharga dari artikel ini.

Di bawah ini, saya telah membaginya menjadi 5 langkah.

5.1 Dua Properti Utama

Pembaca yang jeli mungkin telah melihat dua properti frontmatter ini di tangkapan layar catatan saya sebelumnya:

excalidraw-plugin: parsed
excalidraw-open-md: true

excalidraw-plugin: parsed: Memberi tahu plugin Excalidraw bahwa file .md ini berisi data Excalidraw yang perlu diuraikan. Tanpa properti ini, plugin tidak akan memproses file tersebut.

excalidraw-open-md: true: Membuka file dalam mode Markdown secara default (bukan langsung masuk ke mode menggambar). Atur ke true, Anda akan melihat teks terlebih dahulu saat membuka file, dan beralih secara manual saat perlu menggambar. Tanpa itu, setiap kali Anda membuka file, file akan langsung melompat ke papan gambar, dan Anda harus kembali lagi untuk membaca teks—menyebalkan.

Dengan dua properti ini di frontmatter, file memiliki kemampuan “mode ganda”.

5.2 Membuat File Template

Kunci dari pengaturan dua-dalam-satu adalah menyimpan konfigurasi ini dalam file template, sehingga catatan baru secara otomatis memuatnya tanpa perlu menambahkan secara manual setiap kali.

Langkah-langkah:

1. Di folder template Anda (misalnya 02 Templates/), buat file .md baru dan beri nama “Excalidraw Template”.
2. Salin dan tempel konten berikut ke dalamnya, lalu simpan.

---
excalidraw-plugin: parsed
excalidraw-open-md: true
---

%%
### Drawing
```compressed-json
N4IgLgngDgpiBcIYA8DGBDANgSwCYCd0B3EAGhADcZ8BnbAewDsEAmcm+gV31TkQAswYKDXgB6MSgw4CxAHSp6AWzJJMMJTEZgaCANoBdcuihQAymHRg+oCthhEAQulQBrAOb4ujXAGF6mPT4CCAAxABmkVGqnnhm2ABefIycmJgAvuTh2Oq68MDp6UA
```
%%

Ini adalah template Excalidraw dengan kanvas kosong. Dua properti frontmatter (excalidraw-plugin: parsed dan excalidraw-open-md: true) memberi tahu plugin bahwa file ini dalam format dua-dalam-satu dan harus dibuka dalam mode Markdown secara default. compressed-json di akhir adalah data kanvas kosong.

5.3 Pengaturan Plugin Excalidraw

Memiliki file template saja tidak cukup—Anda juga perlu memberi tahu plugin Excalidraw “di mana menemukan template” dan menonaktifkan pengaturan yang mengganggu pengelolaan file.

Jalur: Pengaturan → Excalidraw

Dua hal yang perlu dimodifikasi:

① Atur lokasi template: Di pengaturan Excalidraw, temukan opsi “Template file” dan masukkan path ke template Anda, misalnya 02 Templates/Excalidraw Template. Mulai saat itu, setiap kali Anda membuat file baru dengan Excalidraw, secara otomatis akan menggunakan template ini, termasuk properti excalidraw-open-md: true.

② Nonaktifkan “Add date to new file name”: Secara default, Excalidraw menambahkan tanggal pembuatan ke nama file baru, misalnya Drawing 2026-03-12. Ini membuat nama file panjang dan tidak kompatibel dengan logika penamaan template Obsidian. Temukan opsi ini dan matikan.

5.4 Mengikat Tombol Pintas

Beralih antara mode Markdown dan mode menggambar melalui menu klik kanan terlalu lambat—ikat tombol pintas untuk peralihan instan.

Jalur: Pengaturan → Tombol pintas → Cari “Excalidraw”

Temukan entri ini: “Excalidraw: Toggle between Excalidraw and Markdown mode”

Ikat ke Cmd+E (Mac) atau Ctrl+E (Windows). Pertama periksa apakah kombinasi tombol ini sudah digunakan—default Obsidian Cmd+E untuk miring. Jika Anda sering menggunakan miring, pilih tombol lain, seperti Cmd+Shift+E.

Setelah diikat, dalam file dua-dalam-satu, tekan Cmd+E untuk beralih antara “melihat teks” dan “melihat gambar”—sangat nyaman.

5.5 Data Terkompresi di Akhir File

Setelah pengaturan, setiap kali Anda menyimpan konten gambar dalam file dua-dalam-satu, blok data secara otomatis dihasilkan di akhir file:

%%
### Drawing
```compressed-json
N4IgLgngDgpiBcIYA8DGBDANgSwCYCd0B3EAGhADcZ8BnbAewDsEAmcm+gV31TkQ...
```
%%

Blok kode compressed-json ini adalah hasil kompresi semua data gambar—koordinat, warna, konten teks, hubungan koneksi—semua dikompresi menjadi satu baris string.

Tiga hal yang perlu diperhatikan:

• Jangan hapus konten ini secara manual. Jika Anda menghapusnya, data gambar hilang, dan beralih ke mode Excalidraw akan menampilkan kanvas kosong.
• %% adalah sintaks komentar Obsidian. Dalam mode Baca, konten ini tersembunyi dan tidak akan ditampilkan, sehingga tidak mempengaruhi keterbacaan catatan.
• Baris compressed-json harus berupa satu baris utuh. Jika terputus oleh jeda baris, file akan error dan gagal dibuka.

Ringkasan

Apa yang Anda pelajari hari ini:

1. Excalidraw = alat menggambar gratis dan sumber terbuka: Memiliki versi web mandiri; Obsidian menggunakan versi plugin pihak ketiga, dengan gaya gambar tangan dan kanvas tak terbatas.
2. Perbedaan inti dengan Canvas: Canvas menghasilkan file .canvas terpisah yang perlu dikelola mandiri; data gambar Excalidraw dapat dikompresi dan disematkan ke dalam file .md—satu file, dua kegunaan.
3. Instalasi: Pengaturan → Plugin pihak ketiga → Plugin komunitas → Cari dan instal Excalidraw.
4. Pintasan alat: Tombol angka 1-8 dan 0 untuk mengganti alat, Esc untuk keluar dari pengeditan, Tab untuk melompat antar elemen, tombol panah untuk memindahkan—irama inti: tombol angka untuk alat + Esc/Tab untuk navigasi.
5. Menggambar AI: Skill /obsidian-excalidraw memungkinkan Claude Code langsung menghasilkan gambar tersemat, jauh lebih cepat daripada menyeret node secara manual.
6. Pengaturan dua-dalam-satu: Tambahkan excalidraw-plugin: parsed + excalidraw-open-md: true ke frontmatter, konfigurasikan melalui file template, atur path template di pengaturan Excalidraw, ikat Cmd+E untuk peralihan mode cepat.
7. Data di akhir file: Blok kode ## Drawing + compressed-json adalah data gambar terkompresi, dibungkus dengan %%, tidak terlihat dalam mode Baca—jangan hapus secara manual.

Ucapan Terima Kasih: Pengaturan “Dua-dalam-Satu” di bab ini mengacu pada metode oleh kreator Bilibili Fiveth_ (video: BV1hyhPzoEcd), disebutkan di sini.