Excalidraw Nedir ve Kendi Beyaz Tahta Sunucunuz

Bir fikri anlatmanın en hızlı yolu çoğu zaman onu çizmektir. Toplantı sırasında bir mimariyi tahtaya karalamak, bir kullanıcı akışını ok ve kutularla göstermek ya da bir düşünceyi kabaca eskize dökmek, sayfalarca metinden daha etkilidir. İşte Excalidraw tam da bu ihtiyaç için doğmuş, sanki eliyle çizilmiş gibi görünen sade diyagramlar üretmenizi sağlayan bir sanal beyaz tahtadır. Kutuların köşeleri hafif eğri, çizgiler doğal bir titreklikte olduğu için ortaya çıkan görsel resmi değil, samimi ve "üstünde hâlâ düşünülüyor" hissi verir.

Bu rehberde Excalidraw'ın ne olduğunu, onu bu kadar popüler yapan el çizimi estetiğinin ve iş birliği özelliklerinin nasıl çalıştığını, hazır şekil kütüphanelerini ve en önemlisi kendi sunucunuzda nasıl barındıracağınızı ayrıntısıyla ele alacağız. Docker ile kurulum, gerçek zamanlı birlikte çalışma için collab sunucusunun yapılandırılması, çizimleri dışa aktarma ve başka sitelere gömme gibi pratik konulara da girecek; kimin için mantıklı bir seçim olduğunu da netleştireceğiz.

Excalidraw nedir ve neden bu kadar seviliyor?#

Excalidraw, tarayıcı üzerinde çalışan, açık kaynak kodlu (MIT lisanslı) bir sanal beyaz tahta ve diyagram aracıdır. Onu diğer çizim uygulamalarından ayıran en belirgin özellik, ürettiği her şeklin el çizimi (hand-drawn) görünümünde olmasıdır. Bir dikdörtgen çizdiğinizde kenarları matematiksel olarak kusursuz düz değil, hafif dalgalı ve doğaldır. Bu, teknik dokümanların çoğu zaman fazla "resmi" ve tamamlanmış hissettirmesi sorununu zekice çözer: taslak gibi görünen bir diyagram, insanları geri bildirim vermeye ve tartışmaya daha rahat davet eder.

Yazılımın felsefesi sadeliktir. Karşınıza yüzlerce menü ve panelle dolu karmaşık bir arayüz çıkmaz; sol tarafta birkaç temel araç (dikdörtgen, elips, ok, çizgi, serbest kalem, metin) ve üstte renk, kalınlık, stil seçenekleri bulunur. Bu minimalizm sayesinde bir fikri ekrana dökmek saniyeler alır. Öğrenme eğrisi neredeyse yoktur; ilk kez açan biri bile birkaç dakika içinde akıcı biçimde çizmeye başlar.

Excalidraw'ın bir başka güçlü yanı veri taşınabilirliğidir. Çizdiğiniz her şey .excalidraw uzantılı, açık ve okunabilir bir JSON dosyasında saklanır. Bu, çalışmanızın herhangi bir tescilli formata hapsolmadığı, istediğiniz zaman dışa aktarıp taşıyabileceğiniz anlamına gelir. Ayrıca varsayılan olarak çizimleriniz tarayıcınızın yerel deposunda tutulur; yani bir sunucuya bağımlı olmadan çevrimdışı da çalışır.

El çizimi estetiği ve temel çizim araçları#

Excalidraw'ın imza görünümünün arkasında Rough.js adlı bir kütüphane vardır. Bu kütüphane her şekli kasıtlı olarak hafif "kusurlu" çizerek o karakalem hissini verir. Ama isterseniz bu stili değiştirebilirsiniz: bir şeklin "sloppiness" (özensizlik) ayarını "architect" (mimar, daha düz) seviyesine çekerek çok daha keskin çizgiler de elde edebilirsiniz. Yani estetik esnektir; hem beyaz tahta taslağı hem de temiz sunum diyagramı üretebilirsiniz.

Temel çizim araçları şunlardır:

• Şekiller: Dikdörtgen, elmas, elips ve serbest çizim (freedraw). Her birinin dolgu rengi, kenar rengi, çizgi kalınlığı, çizgi stili (düz, kesikli, noktalı) ve şeffaflık ayarı yapılabilir.
• Bağlayıcılar (oklar ve çizgiler): Bir oku bir şekle "yapıştırdığınızda", şekli taşıdığınızda ok da onunla birlikte hareket eder. Bu "binding" özelliği, akış diyagramlarını canlı ve düzenlenebilir tutar.
• Metin: Serbest metin ekleyebilir ya da bir şeklin içine çift tıklayarak metni şekle bağlayabilirsiniz. Şekli taşıdığınızda içindeki yazı da taşınır.
• Kalem (freedraw): Fare, kalem tablet veya dokunmatik ekranla serbestçe karalama yapmak için idealdir.
• Kütüphane şekilleri: Hazır bileşen setlerini ekleyerek AWS/Azure ikonları, akış şeması bileşenleri, ağ topolojisi öğeleri gibi tekrar tekrar kullanılan görselleri sürükle-bırak yapabilirsiniz.

Şekiller arasında hizalama, gruplama, katman sıralaması (öne/arkaya alma), kilitleme ve kopyalama gibi tüm temel düzenleme işlemleri mevcuttur. Klavye kısayolları (örneğin r dikdörtgen, a ok, v seçim) akışı ciddi biçimde hızlandırır. Ayrıca metin desteği Markdown benzeri değil düz metindir, ama bir çizime bağlantı (link) ekleyebilir, hatta bir öğeyi tıklandığında aynı sahnedeki başka bir bölgeye götürecek şekilde de bağlayabilirsiniz.

Excalidraw'ın matematiksel-teknik diyagramlar için ayrıca Mermaid desteği vardır: Mermaid söz dizimiyle yazdığınız bir akış şemasını Excalidraw öğelerine dönüştürüp elle düzenlenebilir hâle getirebilirsiniz. Bu, koddan diyagram üretmeyi sevenler için pratik bir köprüdür.

Gerçek zamanlı iş birliği (collaboration)#

Excalidraw'ın kişisel bir eskiz aracından ekip aracına dönüşmesini sağlayan özellik gerçek zamanlı birlikte çalışmadır. Bir çizimin sağ üstündeki "Share" (Paylaş) düğmesine bastığınızda, davet ettiğiniz kişiler aynı tuval üzerinde eş zamanlı olarak çizim yapabilir; herkesin imleci farklı renkte görünür ve değişiklikler anında yansır. Bu, uzaktan çalışan ekipler için sanal bir beyaz tahta odası gibidir.

Burada dikkat edilmesi gereken önemli bir teknik ayrıntı var: iş birliği oturumları uçtan uca şifrelidir. Paylaşım bağlantısını oluşturduğunuzda çizim verisi tarayıcıda şifrelenir ve şifre çözme anahtarı, bağlantının # işaretinden sonraki kısmında (URL fragment) taşınır. Bu fragment sunucuya hiç gönderilmez; yalnızca bağlantıya sahip olanların tarayıcısında kalır. Yani birlikte çalışma sunucusu, üzerinden geçen çizimlerin içeriğini göremez — yalnızca şifreli veriyi ileten bir aracıdır.

Bu iş birliği altyapısı iki ayrı bileşenden oluşur ve kendi kurulumunuzda bunları ayrıca çalıştırmanız gerekir:

Tek başına ana uygulamayı kurarsanız yerel çizim yapabilir, dışa aktarabilirsiniz; ama "Share" ile canlı birlikte çalışma için excalidraw-room sunucusunu da devreye almanız gerekir. Aşağıda ikisini birlikte ayağa kaldıran bir yapılandırma göstereceğiz.

Docker ile kendi sunucunuza kurulum#

Excalidraw'ı kendi sunucunuzda barındırmanın en temiz yolu Docker'dır. Resmî imaj hazır olduğundan, yalnızca çizim yapıp dışa aktarmak istiyorsanız tek satırlık bir komut yeterlidir:

docker run -d --name excalidraw \
  --restart unless-stopped \
  -p 8080:80 \
  excalidraw/excalidraw:latest

Bu komut Excalidraw'ı sunucunuzun 8080 portunda ayağa kaldırır. Tarayıcıdan http://sunucu-ip:8080 adresine giderek hemen çizmeye başlayabilirsiniz. Ancak bu tek başına kurulumda "Share" ile canlı iş birliği çalışmaz; bunun için collab (room) sunucusunu da eklememiz gerekir.

Aşağıdaki docker-compose.yml, hem ana uygulamayı hem de gerçek zamanlı oturum sunucusunu birlikte çalıştırır:

services:
  excalidraw:
    image: excalidraw/excalidraw:latest
    container_name: excalidraw
    restart: unless-stopped
    ports:
      - "8080:80"

  excalidraw-room:
    image: excalidraw/excalidraw-room:latest
    container_name: excalidraw-room
    restart: unless-stopped
    ports:
      - "8081:80"

Ana uygulamanın room sunucusunu bulabilmesi için, imajı derlerken ya da çalıştırırken WebSocket sunucusunun adresini belirtmeniz gerekir. Resmî imaj bunu bir ortam değişkeniyle bekler:

    environment:
      - VITE_APP_WS_SERVER_URL=https://cizim.alanadiniz.com/ws

Burada VITE_APP_WS_SERVER_URL, tarayıcının canlı oturum için bağlanacağı adrestir. Üretim ortamında bu adresi doğrudan port numarasıyla değil, aşağıda anlatacağımız gibi bir ters vekil arkasından HTTPS ile sunmanız gerekir; aksi hâlde tarayıcılar güvensiz WebSocket bağlantısını engeller.

Ters vekil ve HTTPS yapılandırması#

Excalidraw'ı gerçek bir alan adı altında, şifreli (HTTPS) ve WebSocket destekli sunmak için önüne bir Nginx ters vekil koymak en sağlıklı yöntemdir. Aşağıdaki yapılandırma, ana uygulamayı kök dizinden, room sunucusunu ise /ws yolundan sunar ve WebSocket yükseltme başlıklarını doğru şekilde iletir:

server {
    listen 443 ssl http2;
    server_name cizim.alanadiniz.com;

    ssl_certificate     /etc/letsencrypt/live/cizim.alanadiniz.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/cizim.alanadiniz.com/privkey.pem;

    # Ana Excalidraw uygulaması
    location / {
        proxy_pass http://127.0.0.1:8080;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }

    # Gerçek zamanlı oturum (collab) sunucusu
    location /ws/ {
        proxy_pass http://127.0.0.1:8081/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
        proxy_read_timeout 3600s;
    }
}

server {
    listen 80;
    server_name cizim.alanadiniz.com;
    return 301 https://$host$request_uri;
}

Buradaki iki kritik nokta şudur: Upgrade ve Connection "upgrade" başlıkları olmadan WebSocket bağlantısı kurulamaz, dolayısıyla canlı iş birliği sessizce çalışmaz; ve proxy_read_timeout değerini yüksek tutmak, uzun süren oturumların zaman aşımına uğrayıp kopmasını engeller. TLS sertifikasını Let's Encrypt ile ücretsiz alabilirsiniz — bu konuda SSL sertifikası hizmetimiz ve otomatik kurulum seçeneklerimiz işinizi kolaylaştırır. Alan adı yönlendirmesi için önce bir A kaydını sunucunuzun IP adresine yönlendirmeniz gerekir; alan adı arayışındaysanız alan adı sayfamızdan başlayabilirsiniz.

Yapılandırmayı sınamak ve yeniden yüklemek için:

nginx -t && systemctl reload nginx

Dışa aktarma ve başka sitelere gömme#

Bir çizimi tamamladığınızda onu paylaşmanın veya belgelere eklemenin birden çok yolu vardır. Excalidraw'ın dışa aktarma seçenekleri oldukça esnektir:

• PNG: Çizimin bitmap görüntüsü. Sunumlara, e-postalara veya ekran görüntüsü gerektiren her yere uygundur. Arka planı şeffaf yapma ve ölçek (1x/2x/3x) seçme imkânı vardır.
• SVG: Vektör tabanlı, sınırsız büyütülebilir çıktı. Web sitelerine gömmek ve baskı kalitesi gerektiren durumlar için en iyisidir; dosya boyutu genelde küçüktür.
• .excalidraw (JSON): Çalışmanın kaynak dosyası. Bunu kaydederseniz daha sonra tekrar açıp düzenleyebilirsiniz. Ekip içinde paylaşmak ve sürüm kontrolüne almak için idealdir.
• Panoya kopyala: Seçili öğeleri doğrudan PNG olarak panoya kopyalayıp başka bir uygulamaya yapıştırabilirsiniz.

Bir başka güçlü özellik, PNG ve SVG dışa aktarımlarına çizim verisinin gömülmesidir. Excalidraw, "scene embedding" seçeneği açıkken dışa aktardığı görselin içine kaynak sahneyi de saklar. Böylece birine gönderdiğiniz PNG dosyasını o kişi tekrar Excalidraw'a sürükleyip bıraktığında, düzenlenebilir hâliyle açılır — görsel sadece bir resim değil, aynı zamanda kaynağını da taşır.

Çizimleri kendi web sitenize veya dokümantasyonunuza gömmek için birkaç yaklaşım vardır. En basiti, dışa aktardığınız SVG'yi doğrudan sayfanıza koymaktır. Canlı ve gömülü bir tuval isterseniz, Excalidraw'ı bir iframe içinde barındırabilir ya da resmî @excalidraw/excalidraw React bileşenini kendi uygulamanıza dahil edebilirsiniz. Ekip bilgi tabanınızda çizimleri düzenli tutmak istiyorsanız, Outline gibi bir wiki aracıyla birlikte kullanmak; dosya ve görselleri merkezî tutmak içinse Nextcloud tabanlı bir depolama mantıklı bir tamamlayıcı olur. Statik SVG çıktılarını barındırmak için standart bir web hosting paketi fazlasıyla yeterlidir.

Kimler için uygun ve sistem gereksinimleri#

Excalidraw şaşırtıcı derecede hafiftir; ana uygulama esasen bir statik web uygulaması olduğundan sunucu tarafında ciddi kaynak tüketmez. Yük daha çok kullanıcının tarayıcısındadır. Bu yüzden düşük özellikli bir sunucu bile çok sayıda kişiye hizmet verebilir. Kabaca hedeflenebilecek gereksinimler şöyledir:

Bu hafif profil, Excalidraw'ı küçük bir sanal sunucuda rahatça barındırılabilir kılar; daha fazla izolasyon ve garanti kaynak isterseniz bir VDS sunucu da fazlasıyla yeterlidir. Peki kimler için mantıklı bir tercih?

• Yazılım ve ürün ekipleri: Mimari şemalar, veritabanı ilişkileri, kullanıcı akışları ve beyin fırtınası için hızlı ve düzenlenebilir bir tuval.
• Öğretmenler ve eğitmenler: Ders anlatırken canlı çizim yapmak, öğrencilerle aynı tahtada çalışmak için ideal.
• Danışmanlar ve ajanslar: Müşteriyle görüşürken fikirleri anında görselleştirmek, taslak niteliği sayesinde "henüz karar verilmemiş" hissini korumak.
• Kişisel kullanım: Not alırken, planlama yaparken ya da bir şeyi kendinize açıklarken karalamak.

Buna karşılık, çok katı kurumsal standartlara sahip, birebir hücre hizalı ve kusursuz düz çizgili teknik çizimler üretmeniz gerekiyorsa, el çizimi estetiği ilk bakışta amacınıza uymayabilir (gerçi "architect" modu bu boşluğu büyük ölçüde kapatır). Karar verirken şu soruyu sorun: hız ve iş birliği mi önceliğiniz, yoksa milimetrik hassasiyet mi? Excalidraw ilkinde açık ara öndedir.

Güvenlik, yedekleme ve bakım#

Kendi Excalidraw sunucunuzu çalıştırırken göz önünde bulundurmanız gereken birkaç sorumluluk var. İlk olarak, çizim verisinin nerede durduğunu netleştirin. Varsayılan kurulumda çizimler kullanıcının tarayıcısının yerel deposunda tutulur; sunucu bir kalıcı depolama arka ucu (storage backend) eklemediğiniz sürece sahneleri kalıcı saklamaz. Bu, ekip içinde tek doğruluk kaynağı istiyorsanız .excalidraw dosyalarını düzenli olarak dışa aktarıp bir depoda (örneğin Git ya da bir dosya sunucusu) tutmanız gerektiği anlamına gelir.

Erişim güvenliği için uygulamayı herkese açık bırakmak yerine bir kimlik doğrulama katmanı koymak akıllıcadır. Nginx üzerinde basit bir HTTP Basic Auth ya da bir kimlik sağlayıcı (SSO) ters vekili, uygulamaya yalnızca yetkili kişilerin erişmesini sağlar. Ek bir güvenlik katmanı için önüne bir WAF (web uygulama güvenlik duvarı) yerleştirebilir, kaba kuvvet ve bot trafiğine karşı DDoS koruması devreye alabilirsiniz. Konteynerlerin ve temel imajların düzenli güncellenmesi de ihmal edilmemesi gereken bir bakımdır:

docker compose pull && docker compose up -d

Yedekleme tarafında iki şeyi düşünün: yapılandırma dosyalarınız (docker-compose.yml, Nginx ayarları) ve eğer bir depolama arka ucu kullanıyorsanız onun veri hacmi. Bunları düzenli olarak yedeklemek için otomatik yedekleme çözümlerimizden faydalanabilirsiniz. Tüm bu kurulum ve bakım adımlarıyla tek tek uğraşmak istemiyorsanız, sunucu tarafını bizim yönettiğimiz sunucu yönetim hizmetimizi ya da tek tıkla kurulabilen uygulamalar için App Center'ı değerlendirebilirsiniz.

Sıkça Sorulan Sorular#

Excalidraw ücretsiz mi?#

Evet. Excalidraw'ın çekirdek uygulaması açık kaynaktır ve MIT lisansıyla ücretsiz dağıtılır; kendi sunucunuzda dilediğiniz gibi kurup kullanabilirsiniz, herhangi bir lisans ücreti ödemezsiniz. Ayrıca ekipler için barındırma, kalıcı depolama ve ek özellikler sunan ücretli bir bulut sürümü (Excalidraw+) da vardır, ancak kendi sunucunuzda barındırdığınızda buna ihtiyacınız olmaz — yalnızca sunucunuzun maliyeti vardır.

Kendi sunucumda barındırmak zorunda mıyım?#

Hayır, zorunlu değil. excalidraw.com adresindeki genel örneği tarayıcıdan doğrudan kullanabilir ve hemen çizmeye başlayabilirsiniz. Ancak verilerinizin nerede işlendiği üzerinde tam kontrol istiyorsanız, kurumsal gizlilik gereksinimleriniz varsa ya da uygulamayı kendi alan adınız altında ekibinize sunmak istiyorsanız kendi sunucunuza kurmak daha iyi bir seçenektir. Kurulum, gösterdiğimiz gibi Docker ile oldukça basittir.

Canlı iş birliği için ayrı bir sunucu şart mı?#

Gerçek zamanlı birlikte çalışma (Share özelliği) için evet, excalidraw-room adlı WebSocket sunucusunu da çalıştırmanız gerekir. Yalnızca ana uygulamayı kurarsanız çizim yapıp dışa aktarabilirsiniz ama başkalarıyla aynı tuvalde eş zamanlı çalışamazsınız. Rehberdeki docker-compose örneği her iki bileşeni de birlikte ayağa kaldırır; Nginx yapılandırmasında da WebSocket başlıklarını doğru iletmeniz önemlidir.

Çizimlerim ne kadar güvenli tutuluyor?#

Gerçek zamanlı iş birliği oturumları uçtan uca şifrelidir ve şifre çözme anahtarı paylaşım bağlantısının URL fragment kısmında taşınır; bu kısım sunucuya hiç gönderilmez, dolayısıyla oturum sunucusu çizim içeriğinizi göremez. Yerel çizimler ise tarayıcınızın deposunda kalır. Yine de kalıcılık ve yetkisiz erişim önlemleri sizin sorumluluğunuzdadır; erişimi bir kimlik doğrulama katmanıyla sınırlamak ve .excalidraw dosyalarını düzenli yedeklemek en sağlıklı yaklaşımdır.

Excalidraw ile hazır ikon ve şablonlar kullanabilir miyim?#

Evet. Excalidraw'ın kütüphane (library) sistemi sayesinde topluluk tarafından hazırlanmış AWS, Azure, ağ topolojisi, akış şeması ve UI taslağı gibi birçok hazır bileşen setini içe aktarıp sürükle-bırak yapabilirsiniz. Ayrıca kendi sık kullandığınız şekilleri de kütüphaneye ekleyerek tekrar tekrar kullanabilirsiniz. Mermaid söz dizimiyle yazılmış diyagramları da içe aktararak düzenlenebilir Excalidraw öğelerine dönüştürebilirsiniz.

Çizimlerimi web sitesine veya dokümanlara nasıl eklerim?#

En pratik yol, çizimi PNG ya da SVG olarak dışa aktarıp ilgili sayfaya eklemektir; vektör kalitesi ve küçük dosya boyutu için genelde SVG tercih edilir. Dışa aktarım sırasında "sahneyi göm" seçeneğini açarsanız, görsel dosyası kaynağı da taşır ve alıcı onu tekrar Excalidraw'a sürükleyerek düzenleyebilir. Canlı, gömülü bir tuval isterseniz uygulamayı bir iframe içinde barındırabilir ya da resmî React bileşenini kendi uygulamanıza dahil edebilirsiniz.

Kapanış#

Excalidraw, sadeliği ve o samimi el çizimi estetiğiyle "fikri hızlıca görselleştirme" ihtiyacına belki de en zarif cevaplardan biridir. Kurulumu Docker sayesinde dakikalar sürer, kaynak tüketimi düşüktür, iş birliği özelliği uçtan uca şifreli olduğu için gizlilik açısından da içiniz rahat olur. Kendi alan adınız altında, kendi denetiminizde bir beyaz tahtaya sahip olmak; ekiplerin toplantılarında, eğitmenlerin derslerinde ve tek başına düşünürken karalamalarında büyük fark yaratır.

Eğer Excalidraw'ı ya da benzeri açık kaynak uygulamaları kendi sunucunuzda çalıştırmak istiyorsanız, ihtiyacınıza uygun bir altyapıyla başlamak yeterlidir. Hafif ve esnek bir başlangıç için sanal sunucu ve VDS sunucu seçeneklerimize göz atabilir, kurulum ve bakımı bize bırakmak isterseniz sunucu yönetim hizmetimizden yararlanabilir, tek tıkla hazır uygulamalar için ise Clou.TR App Center sayfasını inceleyebilirsiniz. Verilerinizi kendi kontrolünüzde tutan bir beyaz tahtaya geçmek düşündüğünüzden çok daha kolay.