draw.biyik.dev nasıl kullanılır?

1Başlarken

draw.biyik.dev adresini aç. Hesap ya da kurulum gerekmez. Tuval boşken karşılama ekranı görünür: buradan kayıtlı bir dosyayı açabilir, kısayolları görebilir ya da doğrudan çizmeye başlayabilirsin. Çizimlerin otomatik olarak yalnızca bu tarayıcıya kaydedilir.

2Şekil çiz

Üstteki araç çubuğundan bir şekil seç ve tuvalde sürükle. Her aracın bir kısayolu vardır:

• R dikdörtgen, D eşkenar dörtgen, U üçgen, O elips
• A ok, L çizgi, P kalem, T metin, E silgi
• Çizerken Shift kare/daire yapar, Alt merkezden çizer. Araçtaki kilit (Q) açıksa araç her çizimden sonra seçime dönmez.

Bir şekil seçiliyken soldaki stil panelinden kontur ve arka plan rengini, dolgu tipini (tarama, çapraz, tam), kalınlığı, çizgi stilini, el izi düzeyini ve köşeleri değiştirebilirsin.

3Metin ve etiketler

Bir şeklin içine çift tıkla ve yaz: metin şeklin etiketi olur ve şekille birlikte taşınır. Boş bir yere çift tıklamak ya da T ile tıklamak serbest metin ekler. Bitirmek için Esc ya da dışarı tıkla. Yazı tipi (el yazısı, normal, kod), boyut ve hizalama da panelden seçilir.

4Oklar ve bağlama

A ile bir şeklin içinden başlayıp başka bir şeklin üzerine sürükle. Hedef şekil mavi kenarla vurgulanır; bıraktığında ok iki şekle de bağlanır. Şekilleri taşıdığında, büyüttüğünde ya da döndürdüğünde ok kendiliğinden takip eder. Okun uçlarını panelden değiştirebilir (ok, üçgen, nokta, çubuk), tıklayıp tıklayarak çok noktalı çizgi çizebilirsin.

5Seç, taşı, döndür

• Tıklayarak seç, boş alanda sürükleyerek kutu seçimi yap, Shift ile seçime ekle.
• Köşe tutamaçları boyutlandırır, üstteki yuvarlak tutamaç döndürür (Shift ile 15° adım).
• Alt ile sürüklemek kopyalar; ⌘D çoğaltır, ⇧H/⇧V çevirir.
• Birden çok öğe seçiliyken panelden hizalayabilir ve eşit aralıkla dağıtabilirsin.

6Katmanlar ve gruplar

Sağ üstteki katman düğmesi (⌥L) her öğeyi liste olarak gösterir. Satırları sürükleyerek sırala, çift tıklayarak adlandır; göz simgesi gizler, kilit simgesi öğeyi tuvalde seçilemez yapar. Seçili öğeleri ⌘G ile grupla: gruplar listede açılıp kapanan klasör olarak görünür ve birlikte taşınır.

7Menü ve dosyalar

Sol üstteki menüden dosya açar (⌘O) ve kaydedersin (⌘S). Kayıtlar kendi biçimimiz olan .biyikdraw dosyasıdır; başka bir cihazda açarak çalışmaya devam edebilirsin. Izgara, tema, dil (TR/EN) ve tuval rengi de buradadır.

8Dışa aktarma

Dışa aktar (⌘⇧E) çizimi PNG ya da SVG olarak indirir veya panoya kopyalar. Yalnızca seçili öğeleri, arka planlı/şeffaf, açık/koyu ve 1×–3× ölçekte alabilirsin.

9Paylaş ve çevrimdışı

Sağ üstteki Paylaş düğmesi bir bağlantı üretir. Bağlantı çizimin kendisini (sıkıştırılmış olarak) içerir; adresin # kısmı tarayıcıdan sunucuya hiç gönderilmediği için çizimin hiçbir sunucuya yüklenmez ve hesap gerekmez.

• Bağlantıyı açan kişi çizimi salt okunur görür; kaydırıp yakınlaştırabilir, isterse Tahtama ekle ile kendi tahtasına kopyalar. Kendi çizimleri silinmez.
• Çevrimdışı paylaşım: “HTML dosyası” internet olmadan her tarayıcıda açılan tek bir dosyadır (yazı tipleri içinde). E-posta, mesaj ya da USB ile gönderebilirsin; menüdeki “Aç” ile yeniden düzenlenebilir.
• draw.biyik.dev bir kez açıldıktan sonra internet olmadan da çalışır; paylaşım bağlantıları da çevrimdışıyken açılır.

10Öğretmenler ve tablet için

Tabletten ders anlatan öğretmenler için: tahtayı projeksiyona ya da akıllı tahtaya yansıtıp kalemle anlatabilirsin.

• Ders modu (⌥P ya da menü): tam ekran, sade görünüm. Alttaki büyük düğmelerle kalem, fosforlu kalem, lazer, silgi, beş renk, üç kalınlık, kâğıt deseni, geri al ve yeni sayfa tek dokunuşla.
• Kâğıt desenleri: kareli, noktalı, çizgili defter ve kılavuz çizgili (dört çizgili güzel yazı defteri). Desen yakınlaştırınca tahtayla birlikte büyür; dışa aktarmaya da eklenebilir.
• Fosforlu kalem (M): yazının üstünü boyar ama örtmez; özneyi, yüklemi ya da yeni kelimeleri işaretlemek için.
• Lazer işaretçi (K): tahtaya bir şey eklemeden gösterir; iz bir saniyede söner.
• Kalem basıncı: Apple Pencil ve benzeri kalemlerde bastırdıkça çizgi kalınlaşır, yazı doğal görünür.
• Avuç içi koruması: kalem algılanınca parmak ve avuç içi çizmez, yalnızca kaydırır ve yakınlaştırır. Menüdeki “Yalnızca kalemle çiz” ile kapatılabilir.
• Sağ tık menüsü: masaüstünde sağ tık, tablette basılı tut. Kes, kopyala, panoya PNG/SVG/metin, stil kopyala, metni şekle bağla, metni kutu içine al, çerçeveye al, katman sırası, çevir, kilitle.

11Koyu tema ve mobil

Koyu temada renkler otomatik uyarlanır. Telefonda araç çubuğu alta iner; iki parmakla yakınlaştırıp kaydırabilir, stil panelini kaydırıcı düğmesiyle açabilirsin.

12Kısayollar

Windows ve Linux’ta ⌘ yerine Ctrl kullan.

13Kendi projene ekle

Tahta açık kaynaktır ve hiçbir harici çizim kütüphanesine dayanmaz. Kaynak kodu GitHub’da. Paketi GitHub’dan kurup kendi React projene ekleyebilirsin:

npm install github:metinfarukbiyik/biyik-draw
# peer dependencies
npm install react react-dom lucide-react

import { Draw } from 'biyik-draw/react';
import 'biyik-draw/styles.css';

export default function Whiteboard() {
  return (
    // The board fills its positioned parent
    <div style={{ position: 'relative', height: 640 }}>
      <Draw lang="en" storageKey="my-board" />
    </div>
  );
}

Next.js’te bileşeni yalnızca tarayıcıda yükle:

'use client';
import dynamic from 'next/dynamic';

// Canvas and IndexedDB are browser-only: skip SSR
const Whiteboard = dynamic(() => import('./Whiteboard'), { ssr: false });

El yazısı için Caveat yazı tipini sayfana ekle:

<!-- Handwriting font (Caveat) — or: npm i @fontsource/caveat -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&display=swap" />

Özellikler (props)

Yalnızca motor

Arayüz olmadan, sahneyi kodla okuyup SVG/PNG üretmek için motoru doğrudan kullan:

import { Editor, exportToSvg } from 'biyik-draw';

const editor = new Editor();
editor.load(JSON.parse(fileText)); // a .biyikdraw file

const svg = exportToSvg(editor.elements, editor.files, {
  background: '#ffffff',
  theme: 'light',
  scale: 1,
});

Renkler .sk-app üzerindeki --sk-* CSS değişkenleriyle özelleştirilebilir.

14Gizlilik ve lisans

Çizimler ve görseller yalnızca tarayıcında (IndexedDB) saklanır; sunucuya hiçbir şey gönderilmez. Kod MIT lisansıyla açıktır: kullanabilir, değiştirebilir ve kendi projelerinde dağıtabilirsin.

Tahtayı aç →GitHub