{"id":33353,"date":"2025-11-01T23:01:37","date_gmt":"2025-11-01T20:01:37","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/excalidraw-ile-el-cizimi-gorunumlu-diyagramlar-olusturun\/"},"modified":"2025-11-01T23:01:37","modified_gmt":"2025-11-01T20:01:37","slug":"excalidraw-ile-el-cizimi-gorunumlu-diyagramlar-olusturun","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/excalidraw-ile-el-cizimi-gorunumlu-diyagramlar-olusturun\/","title":{"rendered":"Excalidraw ile El \u00c7izimi G\u00f6r\u00fcn\u00fcml\u00fc Diyagramlar Olu\u015fturun"},"content":{"rendered":"

<\/p>\n

Excalidraw, taray\u0131c\u0131 tabanl\u0131, el \u00e7izimi g\u00f6r\u00fcn\u00fcml\u00fc diyagramlar olu\u015fturmak i\u00e7in ideal bir ara\u00e7t\u0131r. Fikirlerinizi h\u0131zl\u0131ca g\u00f6rselle\u015ftirmek mi istiyorsunuz? Bu makalede Excalidraw’\u0131n temel kullan\u0131m\u0131ndan ileri seviye ipu\u00e7lar\u0131na kadar her \u015feyi ke\u015ffedin.<\/p>\n

G\u00fcn\u00fcm\u00fcz\u00fcn h\u0131zla de\u011fi\u015fen i\u015f d\u00fcnyas\u0131nda ve e\u011fitim ortamlar\u0131nda, karma\u015f\u0131k fikirleri basit, anla\u015f\u0131l\u0131r ve etkili bir \u015fekilde iletmek b\u00fcy\u00fck \u00f6nem ta\u015f\u0131r. Bazen bir projenin ak\u0131\u015f\u0131n\u0131 a\u00e7\u0131klamak, bazen yeni bir konsepti beyin f\u0131rt\u0131nas\u0131 yoluyla \u015fekillendirmek ya da bir yaz\u0131l\u0131m mimarisini g\u00f6rselle\u015ftirmek gerekir. Geleneksel diyagram ara\u00e7lar\u0131, genellikle \u00e7ok keskin, steril ve bazen de s\u0131k\u0131c\u0131 g\u00f6r\u00fcn\u00fcmler sunar. Bu durum, \u00f6zellikle yarat\u0131c\u0131l\u0131k ve esnekli\u011fin \u00f6n planda oldu\u011fu ortamlarda, fikir ak\u0131\u015f\u0131n\u0131 k\u0131s\u0131tlay\u0131c\u0131 bir etki yaratabilir. Peki ya el \u00e7izimi esteti\u011fine sahip, insan dokunu\u015funu bar\u0131nd\u0131ran, samimi ve ayn\u0131 zamanda profesyonel g\u00f6r\u00fcnen diyagramlar olu\u015fturabilseydik? \u0130\u015fte tam bu noktada Excalidraw gibi ara\u00e7lar devreye giriyor ve dijital d\u00fcnyan\u0131n steril yap\u0131s\u0131na kar\u015f\u0131 taze bir nefes getiriyor.<\/p>\n

El \u00e7izimi g\u00f6r\u00fcn\u00fcml\u00fc diyagramlar, izleyicide farkl\u0131 bir etki yarat\u0131r. Kusursuz dijital \u00e7izgilerin aksine, hafif\u00e7e titrek, eskiz benzeri bir g\u00f6r\u00fcn\u00fcm, daha “insani” ve “ula\u015f\u0131labilir” bir his uyand\u0131r\u0131r. Bu estetik, \u00f6zellikle erken a\u015fama fikir geli\u015ftirme, beyin f\u0131rt\u0131nas\u0131 oturumlar\u0131 ve e\u011fitim materyalleri i\u00e7in son derece uygundur. \u00c7\u00fcnk\u00fc bu t\u00fcr g\u00f6rseller, “bu hen\u00fcz bir taslak, \u00fczerinde \u00e7al\u0131\u015fabiliriz” mesaj\u0131n\u0131 do\u011fal bir \u015fekilde verir. Bu da tak\u0131m \u00fcyeleri veya \u00f6\u011frenciler aras\u0131nda ele\u015ftirel d\u00fc\u015f\u00fcnceyi ve i\u015fbirli\u011fini te\u015fvik eden bir ortam yarat\u0131r. Karma\u015f\u0131k s\u00fcre\u00e7leri, soyut kavramlar\u0131 veya kullan\u0131c\u0131 aray\u00fcz\u00fc taslaklar\u0131n\u0131 (wireframe) bu estetikle sunmak, hedef kitlenin dikkatini \u00e7ekmekle kalmaz, ayn\u0131 zamanda mesaj\u0131n daha ak\u0131lda kal\u0131c\u0131 olmas\u0131n\u0131 sa\u011flar. Ayr\u0131ca, \u00e7o\u011fu zaman, fikirlerinizi h\u0131zl\u0131ca ka\u011f\u0131da d\u00f6ker gibi dijital ortama aktarmak istersiniz ve bu s\u00fcre\u00e7te detaylara tak\u0131l\u0131p kalmak yerine, ana fikri yakalamak \u00f6ncelikli olur. Geleneksel ara\u00e7lar genellikle \u00e7ok fazla bi\u00e7imlendirme se\u00e7ene\u011fi sunarak bu h\u0131z\u0131 keserken, Excalidraw’\u0131n minimalist yakla\u015f\u0131m\u0131 bu sorunu ortadan kald\u0131r\u0131r. Kullan\u0131c\u0131lar, teknik detaylara bo\u011fulmadan, ak\u0131llar\u0131ndaki g\u00f6r\u00fcnt\u00fcy\u00fc an\u0131nda dijital bir eskize d\u00f6n\u00fc\u015ft\u00fcrebilirler. Bu esneklik ve sadelik, Excalidraw’\u0131 sadece diyagram \u00e7izmekle kalmay\u0131p, ayn\u0131 zamanda fikirleri ke\u015ffetme ve yarat\u0131c\u0131l\u0131\u011f\u0131 tetikleme arac\u0131 haline getirir. Bu makale boyunca, Excalidraw’\u0131n sundu\u011fu bu benzersiz deneyimi, temel \u00f6zelliklerinden ileri d\u00fczey kullan\u0131m\u0131na, ger\u00e7ek d\u00fcnya senaryolar\u0131ndan geli\u015ftirici perspektifine kadar t\u00fcm y\u00f6nleriyle ele alaca\u011f\u0131z.<\/p>\n

Excalidraw Nedir ve Temel \u0130\u015flevselli\u011fi Neler Sunar?<\/h2>\n

Excalidraw, tamamen taray\u0131c\u0131 tabanl\u0131 \u00e7al\u0131\u015fan, a\u00e7\u0131k kaynakl\u0131 ve \u00fccretsiz bir diyagram \u00e7izim uygulamas\u0131d\u0131r. Temel amac\u0131, kullan\u0131c\u0131lara ka\u011f\u0131t \u00fczerinde elle \u00e7izilmi\u015f gibi g\u00f6r\u00fcnen diyagramlar ve eskizler olu\u015fturma imkan\u0131 sunmakt\u0131r. Bu \u00f6zelli\u011fi sayesinde, profesyonel ama ayn\u0131 zamanda samimi bir g\u00f6r\u00fcn\u00fcme sahip ak\u0131\u015f \u015femalar\u0131, UI\/UX taslaklar\u0131, yaz\u0131l\u0131m mimarisi diyagramlar\u0131, beyin f\u0131rt\u0131nas\u0131 notlar\u0131 ve daha fazlas\u0131n\u0131 kolayca olu\u015fturabilirsiniz. Uygulaman\u0131n minimalist ve sezgisel aray\u00fcz\u00fc, hem yeni ba\u015flayanlar\u0131n hem de deneyimli kullan\u0131c\u0131lar\u0131n h\u0131zla adapte olmas\u0131n\u0131 sa\u011flar. \u00d6zellikle web tabanl\u0131 olmas\u0131, herhangi bir kurulum gerektirmemesi ve internet ba\u011flant\u0131s\u0131 olan herhangi bir cihazdan eri\u015filebilmesi, Excalidraw’\u0131n pop\u00fclaritesinin arkas\u0131ndaki \u00f6nemli fakt\u00f6rlerdendir.<\/p>\n

Excalidraw’\u0131n en belirgin \u00f6zelli\u011fi, t\u00fcm \u00e7izim elemanlar\u0131na uygulad\u0131\u011f\u0131 “elle \u00e7izilmi\u015f” efektidir. Dikd\u00f6rtgenler tam olarak d\u00fcz kenarlara sahip de\u011fildir, \u00e7izgiler hafif\u00e7e dalgal\u0131d\u0131r ve metinler bile bir el yaz\u0131s\u0131 esteti\u011fi ta\u015f\u0131r. Bu stil, karma\u015f\u0131k teknik diyagramlar\u0131n bile daha az g\u00f6z korkutucu ve daha davetkar g\u00f6r\u00fcnmesini sa\u011flar. Uygulama, temel \u015fekiller (dikd\u00f6rtgen, daire, elips, oklar, \u00e7izgiler), metin ara\u00e7lar\u0131 ve ba\u011flay\u0131c\u0131lar gibi standart diyagram \u00f6\u011felerini bar\u0131nd\u0131r\u0131r. Bununla birlikte, bu ara\u00e7lar\u0131n her biri \u00fczerinde \u00f6zelle\u015ftirmeler yapabilirsiniz; \u00e7izgi kal\u0131nl\u0131\u011f\u0131, rengi, dolgu tipi (d\u00fcz, taral\u0131, \u00e7apraz taral\u0131), \u00e7izgi stili (d\u00fcz, kesik, noktal\u0131) ve hatta “p\u00fcr\u00fczl\u00fcl\u00fck” seviyesi gibi ayarlar, g\u00f6rsel \u00e7\u0131kt\u0131y\u0131 tamamen sizin kontrol\u00fcn\u00fcze b\u0131rak\u0131r. \u00d6rne\u011fin, bir elementin p\u00fcr\u00fczl\u00fcl\u00fck seviyesini art\u0131rarak daha belirgin bir eskiz g\u00f6r\u00fcn\u00fcm\u00fc elde edebilir veya azaltarak daha d\u00fczenli bir \u00e7izime yakla\u015fabilirsiniz. Bu detaylar, Excalidraw’\u0131 s\u0131radan bir \u00e7izim arac\u0131ndan ay\u0131ran ve ona \u00f6zg\u00fcn bir karakter kazand\u0131ran niteliklerdir. Ayr\u0131ca, uygulama i\u00e7inde haz\u0131r bile\u015fenlerden olu\u015fan k\u00fct\u00fcphaneler olu\u015fturabilir veya mevcut k\u00fct\u00fcphaneleri i\u00e7e aktarabilirsiniz. Bu sayede s\u0131k\u00e7a kulland\u0131\u011f\u0131n\u0131z \u00f6\u011feleri tekrar tekrar \u00e7izmek zorunda kalmaz, verimlili\u011finizi art\u0131r\u0131rs\u0131n\u0131z. \u00d6rne\u011fin, bir web projesinin UI tasla\u011f\u0131n\u0131 \u00e7izerken buton, metin kutusu, men\u00fc gibi bile\u015fenleri k\u00fct\u00fcphanenizden s\u00fcr\u00fckleyip b\u0131rakarak zamandan tasarruf edebilirsiniz. Excalidraw ayr\u0131ca, kullan\u0131c\u0131lar\u0131n \u00e7izimlerini SVG, PNG veya JSON format\u0131nda d\u0131\u015fa aktarmalar\u0131na olanak tan\u0131r. SVG format\u0131, vekt\u00f6r tabanl\u0131 oldu\u011fu i\u00e7in \u00e7izimlerinizi kaliteden \u00f6d\u00fcn vermeden istedi\u011finiz boyutta \u00f6l\u00e7eklendirmenizi sa\u011flarken, PNG format\u0131 web sitelerinde veya sunumlarda kolayca kullanabilece\u011finiz raster tabanl\u0131 g\u00f6r\u00fcnt\u00fcler sunar. JSON format\u0131 ise \u00e7izim verilerinizi daha sonra d\u00fczenleyebilece\u011finiz veya farkl\u0131 Excalidraw \u00f6rnekleri aras\u0131nda payla\u015fabilece\u011finiz \u015fekilde kaydetmenizi sa\u011flar. T\u00fcm bu \u00f6zellikler, Excalidraw’\u0131 modern dijital \u00e7al\u0131\u015fma ortamlar\u0131nda vazge\u00e7ilmez bir ara\u00e7 haline getirir.<\/p>\n

Excalidraw ile \u0130lk Diyagram\u0131n\u0131z\u0131 Olu\u015fturma Rehberi: Ad\u0131m Ad\u0131m Nas\u0131l Ba\u015flan\u0131r?<\/h2>\n

Excalidraw’\u0131n kullan\u0131m kolayl\u0131\u011f\u0131, onu diyagram \u00e7izmeye yeni ba\u015flayanlar i\u00e7in bile m\u00fckemmel bir se\u00e7enek haline getirir. \u0130lk diyagram\u0131n\u0131z\u0131 olu\u015fturmak i\u00e7in herhangi bir \u00f6zel beceriye veya yaz\u0131l\u0131ma ihtiyac\u0131n\u0131z yok; sadece bir web taray\u0131c\u0131s\u0131 ve internet ba\u011flant\u0131s\u0131 yeterli. Hadi gelin, ad\u0131m ad\u0131m ilk Excalidraw diyagram\u0131n\u0131z\u0131 nas\u0131l \u00e7izece\u011finizi ke\u015ffedelim ve bu s\u00fcrecin ne kadar sezgisel oldu\u011funu g\u00f6relim.<\/p>\n

\u0130lk olarak, web taray\u0131c\u0131n\u0131z\u0131 a\u00e7\u0131n ve excalidraw.com<\/a> adresine gidin. Kar\u015f\u0131n\u0131za bembeyaz bir tuval ve sol tarafta ara\u00e7 \u00e7ubu\u011fu, \u00fcst tarafta ise genel ayarlar ve dosya i\u015flemleri men\u00fcs\u00fc gelecektir. Bu basit aray\u00fcz, sizi gereksiz detaylarla yormadan do\u011frudan \u00e7izime odaklanman\u0131z\u0131 sa\u011flar. Sol taraftaki ara\u00e7 \u00e7ubu\u011funda, temel \u00e7izim ara\u00e7lar\u0131n\u0131 bulacaks\u0131n\u0131z: serbest \u00e7izim kalemi, dikd\u00f6rtgen, elips, elmas, oklar ve metin kutusu. Bunlar, diyagramlar\u0131n\u0131z i\u00e7in en s\u0131k kullanaca\u011f\u0131n\u0131z ara\u00e7lard\u0131r.<\/p>\n

\u0130lk ad\u0131m olarak, bir “ak\u0131\u015f \u015femas\u0131” \u00f6rne\u011fi olu\u015ftural\u0131m. \u00d6rne\u011fin, bir web sitesi kullan\u0131c\u0131 kay\u0131t ak\u0131\u015f\u0131n\u0131 \u00e7izmek isteyebilirsiniz. Ara\u00e7 \u00e7ubu\u011fundan “Dikd\u00f6rtgen” arac\u0131n\u0131 (\u25af) se\u00e7in. Tuvale t\u0131klay\u0131p s\u00fcr\u00fckleyerek bir dikd\u00f6rtgen \u00e7izin. Bu, genellikle bir “Ba\u015flang\u0131\u00e7” veya “Giri\u015f” ad\u0131m\u0131n\u0131 temsil eder. Ard\u0131ndan, ayn\u0131 ara\u00e7 \u00e7ubu\u011fundan “Metin” arac\u0131n\u0131 (T) se\u00e7in ve \u00e7izdi\u011finiz dikd\u00f6rtgenin i\u00e7ine t\u0131klayarak “Kullan\u0131c\u0131 Kay\u0131t Ba\u015flat” yaz\u0131n. Metni kutuya s\u0131\u011fd\u0131rmak i\u00e7in yaz\u0131 boyutunu veya kutu boyutunu ayarlayabilirsiniz. Metni se\u00e7tikten sonra \u00fcst men\u00fcdeki se\u00e7eneklerden boyutunu veya rengini de\u011fi\u015ftirebilirsiniz. Bu \u015fekilde ilk elementiniz haz\u0131r olacakt\u0131r.<\/p>\n

\u015eimdi bir sonraki ad\u0131m\u0131 ekleyelim. Tekrar “Dikd\u00f6rtgen” arac\u0131n\u0131 se\u00e7in ve ilk dikd\u00f6rtgenin alt\u0131na yeni bir tane \u00e7izin. “Metin” arac\u0131yla bu yeni dikd\u00f6rtgene “Bilgileri Gir (E-posta, \u015eifre)” yaz\u0131n. Bu iki ad\u0131m\u0131 birbirine ba\u011flamak i\u00e7in “Ok” arac\u0131n\u0131 se\u00e7in. \u0130lk dikd\u00f6rtgenin kenar\u0131na t\u0131klay\u0131p s\u00fcr\u00fckleyerek ikinci dikd\u00f6rtgenin kenar\u0131na b\u0131rak\u0131n. Excalidraw, elemanlar\u0131 otomatik olarak alg\u0131lar ve okunuzu d\u00fczg\u00fcn bir \u015fekilde ba\u011flar. Bu ba\u011flay\u0131c\u0131lar, elemanlar\u0131n\u0131z\u0131 hareket ettirdi\u011finizde bile ba\u011flant\u0131lar\u0131n\u0131 korur, bu da diyagram\u0131n\u0131z\u0131 d\u00fczenlerken b\u00fcy\u00fck kolayl\u0131k sa\u011flar.<\/p>\n

Diyagram\u0131n\u0131za farkl\u0131 \u015fekiller ekleyerek zenginle\u015ftirebilirsiniz. \u00d6rne\u011fin, bir karar noktas\u0131n\u0131 g\u00f6stermek i\u00e7in “Elmas” (\u25c6) arac\u0131n\u0131 kullanabilirsiniz. “E-posta Onay\u0131 Gerekli mi?” gibi bir soru soran bir elmas \u00e7izin. Bu elmas kutusundan “Evet” ve “Hay\u0131r” y\u00f6n\u00fcnde iki farkl\u0131 ok \u00e7\u0131kararak farkl\u0131 ak\u0131\u015f yollar\u0131n\u0131 g\u00f6sterebilirsiniz. Her okun \u00fczerine “Metin” arac\u0131yla “Evet” veya “Hay\u0131r” yazabilirsiniz. Bu esneklik, karma\u015f\u0131k i\u015f mant\u0131klar\u0131n\u0131 bile g\u00f6rsel olarak basitle\u015ftirmenize olanak tan\u0131r. Diyagram\u0131n\u0131zdaki elemanlar\u0131n rengini de\u011fi\u015ftirmek i\u00e7in, istedi\u011finiz eleman\u0131 se\u00e7in ve \u00fcst men\u00fcdeki “Stroke” (kenarl\u0131k rengi) ve “Background” (dolgu rengi) se\u00e7eneklerini kullan\u0131n. Bu renkler, diyagram\u0131n\u0131zdaki farkl\u0131 t\u00fcrdeki ad\u0131mlar\u0131 veya farkl\u0131 ekiplerin sorumluluklar\u0131n\u0131 vurgulamak i\u00e7in kullan\u0131labilir. \u00d6rne\u011fin, onay ad\u0131mlar\u0131n\u0131 ye\u015fille, hata durumlar\u0131n\u0131 k\u0131rm\u0131z\u0131yla renklendirebilirsiniz.<\/p>\n

\u00c7iziminiz bitti\u011finde, sa\u011f \u00fcst k\u00f6\u015fedeki disket simgesine t\u0131klayarak diyagram\u0131n\u0131z\u0131 kaydedebilirsiniz. Excalidraw, diyagram\u0131n\u0131z\u0131 PNG, SVG veya JSON format\u0131nda d\u0131\u015fa aktarma se\u00e7enekleri sunar. PNG ve SVG, g\u00f6rsel formatlard\u0131r; PNG raster tabanl\u0131 olup sunumlarda ve belgelerde kullan\u0131\u015fl\u0131d\u0131r, SVG ise vekt\u00f6r tabanl\u0131 oldu\u011fu i\u00e7in kaliteden \u00f6d\u00fcn vermeden \u00f6l\u00e7eklenebilir ve genellikle web sitelerine g\u00f6mmek i\u00e7in tercih edilir. JSON format\u0131 ise diyagram\u0131n\u0131z\u0131n t\u00fcm verilerini kaydeder, b\u00f6ylece daha sonra ayn\u0131 veya farkl\u0131 bir Excalidraw oturumunda a\u00e7\u0131p d\u00fczenlemeye devam edebilirsiniz. Excalidraw’\u0131n bu basit ve g\u00fc\u00e7l\u00fc ara\u00e7lar\u0131, fikirlerinizi h\u0131zla g\u00f6rselle\u015ftirmek i\u00e7in size e\u015fsiz bir \u00f6zg\u00fcrl\u00fck ve kontrol sunar. Her ad\u0131mda, arac\u0131n sundu\u011fu sezgisellik ve minimalist tasar\u0131m, yarat\u0131c\u0131l\u0131\u011f\u0131n\u0131z\u0131n \u00f6n\u00fcndeki engelleri kald\u0131rarak sadece \u00e7izime odaklanman\u0131z\u0131 sa\u011flar.<\/p>\n

Verimlili\u011fi Art\u0131ran \u0130pu\u00e7lar\u0131 ve Ger\u00e7ek D\u00fcnya Senaryolar\u0131: Excalidraw’\u0131 Daha Etkin Nas\u0131l Kullan\u0131rs\u0131n\u0131z?<\/h2>\n

Excalidraw, basit aray\u00fcz\u00fcne ra\u011fmen, i\u015f ak\u0131\u015f\u0131n\u0131z\u0131 h\u0131zland\u0131racak ve diyagramlar\u0131n\u0131z\u0131 daha profesyonel hale getirecek bir\u00e7ok ileri d\u00fczey ipucu ve \u00f6zellik bar\u0131nd\u0131r\u0131r. Bu b\u00f6l\u00fcmde, verimlili\u011finizi art\u0131racak tekniklere ve Excalidraw’\u0131n ger\u00e7ek d\u00fcnya projelerinde nas\u0131l kullan\u0131ld\u0131\u011f\u0131na dair vaka analizlerine odaklanaca\u011f\u0131z.<\/p>\n

\u0130leri D\u00fczey Kullan\u0131m Teknikleri ve K\u0131sayollar<\/h3>\n

Excalidraw’da ustala\u015fman\u0131n en \u00f6nemli yollar\u0131ndan biri, klavye k\u0131sayollar\u0131n\u0131 \u00f6\u011frenmektir. K\u0131sayollar, farenizi s\u00fcrekli ara\u00e7 \u00e7ubu\u011funa g\u00f6t\u00fcr\u00fcp getirme ihtiyac\u0131n\u0131 ortadan kald\u0131rarak \u00e7izim h\u0131z\u0131n\u0131z\u0131 inan\u0131lmaz derecede art\u0131r\u0131r. \u00d6rne\u011fin, ‘R’ tu\u015fu dikd\u00f6rtgen, ‘O’ tu\u015fu daire, ‘L’ tu\u015fu \u00e7izgi ve ‘T’ tu\u015fu metin arac\u0131n\u0131 an\u0131nda se\u00e7menizi sa\u011flar. Se\u00e7ili bir \u00f6\u011feyi \u00e7o\u011faltmak i\u00e7in ‘Alt’ tu\u015funa bas\u0131l\u0131 tutarak s\u00fcr\u00fckleyebilirsiniz. Elemanlar\u0131 hizalamak veya e\u015fit aral\u0131klarla yerle\u015ftirmek i\u00e7in birden fazla eleman\u0131 se\u00e7tikten sonra \u00e7\u0131kan ba\u011flam men\u00fcs\u00fcndeki hizalama ve da\u011f\u0131tma se\u00e7eneklerini kullan\u0131n. Ayr\u0131ca, ‘Shift’ tu\u015funa bas\u0131l\u0131 tutarak birden fazla eleman\u0131 se\u00e7ebilir ve bunlar\u0131 sa\u011f t\u0131klay\u0131p ‘Group selected elements’ se\u00e7ene\u011fiyle gruplayabilirsiniz. Bu, b\u00fcy\u00fck diyagramlarda bile d\u00fczeni koruman\u0131z\u0131 ve elemanlar\u0131 bir b\u00fct\u00fcn olarak hareket ettirmenizi sa\u011flar. Gruplama, \u00f6zellikle karma\u015f\u0131k UI taslaklar\u0131nda veya mod\u00fcler sistem diyagramlar\u0131nda \u00e7ok i\u015fe yarar. Excalidraw, ayr\u0131ca “k\u00fct\u00fcphaneler” (Libraries) \u00f6zelli\u011fini sunar. S\u0131k\u00e7a kulland\u0131\u011f\u0131n\u0131z ikonlar\u0131, bile\u015fenleri veya sembolleri kendi \u00f6zel k\u00fct\u00fcphanenize ekleyebilirsiniz. Bunun i\u00e7in sa\u011f paneldeki k\u00fct\u00fcphane ikonuna t\u0131klay\u0131n ve “Create New Library” se\u00e7ene\u011fini kullan\u0131n. Bu sayede, her projede ayn\u0131 elemanlar\u0131 tekrar tekrar \u00e7izmek yerine, k\u00fct\u00fcphanenizden s\u00fcr\u00fckleyip b\u0131rakarak zamandan tasarruf edersiniz. Topluluk taraf\u0131ndan olu\u015fturulmu\u015f bir\u00e7ok haz\u0131r k\u00fct\u00fcphane de mevcuttur; bunlar\u0131 i\u00e7e aktararak hemen kullanmaya ba\u015flayabilirsiniz. G\u00f6rsel olarak daha estetik sonu\u00e7lar elde etmek i\u00e7in \u00e7izimlerinizin “p\u00fcr\u00fczl\u00fcl\u00fck” (roughness) seviyesini ve \u00e7izgi stilini (solid, dashed, dotted) ayarlamay\u0131 unutmay\u0131n. Bu ince ayarlar, diyagram\u0131n\u0131z\u0131n genel hissiyat\u0131n\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde de\u011fi\u015ftirebilir. \u00d6zellikle “\u00e7izgi stili” ve “dolgusuz” (no fill) se\u00e7eneklerini kullanarak \u015feffaf ve katmanl\u0131 g\u00f6r\u00fcn\u00fcmler olu\u015fturabilirsiniz. Koyu tema (Dark Mode) se\u00e7ene\u011fi de uzun s\u00fcreli \u00e7izim seanslar\u0131 i\u00e7in g\u00f6z yorgunlu\u011funu azaltmada faydal\u0131d\u0131r ve ayn\u0131 zamanda \u00e7izimlerinize farkl\u0131 bir estetik katabilir. Excalidraw’\u0131n dinamik ba\u011flay\u0131c\u0131lar\u0131 sayesinde, bir eleman\u0131 hareket ettirdi\u011finizde ona ba\u011fl\u0131 di\u011fer elemanlar da otomatik olarak uyum sa\u011flar; bu, diyagram d\u00fczenlemeyi \u00e7ok daha pratik hale getirir. Son olarak, ‘Ctrl\/Cmd + Z’ (Geri Al) ve ‘Ctrl\/Cmd + Y’ (Yinele) k\u0131sayollar\u0131n\u0131 etkin bir \u015fekilde kullanarak hatalar\u0131n\u0131z\u0131 kolayca d\u00fczeltebilir ve farkl\u0131 tasar\u0131mlar\u0131 deneyebilirsiniz.<\/p>\n

\n Uzman \u0130pucu: Kendi \u00f6zel renk paletinizi olu\u015fturmak veya daha uyumlu renkler kullanmak i\u00e7in bir renk paleti olu\u015fturma arac\u0131 (\u00f6rne\u011fin Coolors.co) kullan\u0131n ve bu renklerin Hex kodlar\u0131n\u0131 Excalidraw’daki renk se\u00e7iciye girin. Bu sayede diyagramlar\u0131n\u0131zda markan\u0131za \u00f6zel veya estetik olarak uyumlu bir g\u00f6r\u00fcn\u00fcm yakalayabilirsiniz.\n<\/div>\n

Vaka Analizleri: Excalidraw Hangi Alanlarda Fark Yarat\u0131yor?<\/h3>\n

Excalidraw’\u0131n esnekli\u011fi ve samimi esteti\u011fi, onu bir\u00e7ok farkl\u0131 sekt\u00f6r ve kullan\u0131m alan\u0131 i\u00e7in ideal k\u0131lar:<\/p>\n

    \n
  1. Yaz\u0131l\u0131m Geli\u015ftirmede H\u0131zl\u0131 Mimari Tasar\u0131m:<\/strong> Yaz\u0131l\u0131m m\u00fchendisleri ve geli\u015ftiriciler, yeni bir sistem tasarlarken veya mevcut bir mimariyi a\u00e7\u0131klarken Excalidraw’\u0131 s\u0131kl\u0131kla kullan\u0131r. Karma\u015f\u0131k mikroservis yap\u0131lar\u0131n\u0131, veri ak\u0131\u015flar\u0131n\u0131, API entegrasyonlar\u0131n\u0131 veya veritaban\u0131 \u015femalar\u0131n\u0131 h\u0131zl\u0131 ve anla\u015f\u0131l\u0131r bir \u015fekilde g\u00f6rselle\u015ftirmek i\u00e7in idealdir. \u00d6zellikle, ilk a\u015fama taslaklarda veya beyin f\u0131rt\u0131nas\u0131 toplant\u0131lar\u0131nda, kusursuz UML diyagramlar\u0131 yerine Excalidraw’\u0131n sundu\u011fu daha “insani” \u00e7izimler, tak\u0131m \u00fcyeleri aras\u0131nda daha rahat bir tart\u0131\u015fma ortam\u0131 yarat\u0131r ve geri bildirim almay\u0131 kolayla\u015ft\u0131r\u0131r. \u00d6rne\u011fin, bir API gateway’in farkl\u0131 servislerle nas\u0131l ileti\u015fim kurdu\u011funu g\u00f6steren bir diyagram, geleneksel bir ara\u00e7la \u00e7izildi\u011finde “son hali” gibi alg\u0131lanabilirken, Excalidraw ile \u00e7izildi\u011finde “tart\u0131\u015fmaya a\u00e7\u0131k bir taslak” izlenimi verir.<\/li>\n
  2. E\u011fitim ve Beyin F\u0131rt\u0131nas\u0131 Seanslar\u0131 \u0130\u00e7in \u0130deal Bir Ara\u00e7:<\/strong> \u00d6\u011fretmenler ve e\u011fitmenler, karma\u015f\u0131k konular\u0131 \u00f6\u011frencilere a\u00e7\u0131klamak i\u00e7in Excalidraw’\u0131 kullanarak g\u00f6rsel notlar, zihin haritalar\u0131 veya s\u00fcre\u00e7 ak\u0131\u015flar\u0131 olu\u015fturabilirler. \u00d6\u011frencilerin de kendi fikirlerini veya \u00f6zetlerini h\u0131zl\u0131ca \u00e7izerek payla\u015fmalar\u0131 te\u015fvik edilebilir. \u00c7evrimi\u00e7i derslerde, canl\u0131 olarak Excalidraw \u00fczerinde \u00e7izim yaparak \u00f6\u011frencilerin kat\u0131l\u0131m\u0131n\u0131 ve konuya odaklanmas\u0131n\u0131 sa\u011flamak m\u00fcmk\u00fcnd\u00fcr. Beyin f\u0131rt\u0131nas\u0131 oturumlar\u0131nda ise, fikirleri h\u0131zl\u0131ca not almak, konseptleri ba\u011flamak ve \u00f6nceliklendirmek i\u00e7in dijital bir beyaz tahta g\u00f6revi g\u00f6r\u00fcr. Herkesin katk\u0131da bulunabilece\u011fi ortak bir alan sunmas\u0131, yarat\u0131c\u0131l\u0131\u011f\u0131 ve i\u015fbirli\u011fini art\u0131r\u0131r.<\/li>\n
  3. Pazarlama ve Sunumlarda G\u00f6rsel \u00c7ekicilik:<\/strong> Pazarlamac\u0131lar, \u00fcr\u00fcn stratejilerini, m\u00fc\u015fteri yolculuklar\u0131n\u0131 veya kampanya ak\u0131\u015flar\u0131n\u0131 g\u00f6rselle\u015ftirmek i\u00e7in Excalidraw’\u0131 kullanabilirler. El \u00e7izimi esteti\u011fi, sunumlara s\u0131cak ve ki\u015fisel bir dokunu\u015f katarak izleyicinin dikkatini \u00e7ekebilir. \u00d6rne\u011fin, bir sat\u0131\u015f hunisi diyagram\u0131 veya bir i\u00e7erik pazarlama stratejisinin ak\u0131\u015f \u015femas\u0131, Excalidraw ile \u00e7izildi\u011finde, markan\u0131n daha yenilik\u00e7i ve eri\u015filebilir oldu\u011fu izlenimini verebilir. Bu, \u00f6zellikle startup’lar veya yarat\u0131c\u0131 ajanslar i\u00e7in rakiplerinden farkl\u0131la\u015fma f\u0131rsat\u0131 sunar.<\/li>\n<\/ol>\n

    Bu senaryolar, Excalidraw’\u0131n sadece bir \u00e7izim arac\u0131 olmaktan \u00f6te, farkl\u0131 disiplinlerde ileti\u015fimi ve yarat\u0131c\u0131l\u0131\u011f\u0131 g\u00fc\u00e7lendiren \u00e7ok y\u00f6nl\u00fc bir platform oldu\u011funu g\u00f6stermektedir. Esnekli\u011fi, i\u015fbirli\u011fi yetenekleri ve benzersiz esteti\u011fi sayesinde, dijital ortamda fikirleri g\u00f6rselle\u015ftirmek i\u00e7in vazge\u00e7ilmez bir ara\u00e7 haline gelmi\u015ftir.<\/p>\n

    Geli\u015ftirici G\u00f6z\u00fcyle Excalidraw: API, Entegrasyonlar ve \u00d6zelle\u015ftirme Olanaklar\u0131 Nelerdir?<\/h2>\n

    Excalidraw, sadece son kullan\u0131c\u0131lar i\u00e7in de\u011fil, geli\u015ftiriciler i\u00e7in de olduk\u00e7a cazip bir platformdur. A\u00e7\u0131k kaynakl\u0131 yap\u0131s\u0131, React tabanl\u0131 mimarisi ve zengin API’si sayesinde, Excalidraw’\u0131 kendi uygulamalar\u0131n\u0131za entegre edebilir, \u00f6zelle\u015ftirebilir ve hatta platformun geli\u015fimine katk\u0131da bulunabilirsiniz. Bu durum, onu sadece bir diyagram arac\u0131 olmaktan \u00e7\u0131kar\u0131p, g\u00fc\u00e7l\u00fc bir geli\u015ftirici arac\u0131 haline getirir.<\/p>\n

    Excalidraw’\u0131n en \u00f6nemli geli\u015ftirici dostu \u00f6zelliklerinden biri, bir React bile\u015feni olarak mevcut olmas\u0131d\u0131r. Bu sayede, kendi React tabanl\u0131 web uygulaman\u0131z\u0131n i\u00e7ine kolayca bir Excalidraw tuvali g\u00f6mebilirsiniz. Bu, kullan\u0131c\u0131lar\u0131n\u0131z\u0131n uygulaman\u0131zdan hi\u00e7 ayr\u0131lmadan diyagramlar \u00e7izebilmesini, notlar alabilmesini veya taslaklar olu\u015fturabilmesini sa\u011flar. \u00d6rne\u011fin, bir proje y\u00f6netim arac\u0131 geli\u015ftiriyorsan\u0131z, g\u00f6rev ak\u0131\u015flar\u0131n\u0131 \u00e7izmek i\u00e7in Excalidraw’\u0131 entegre edebilirsiniz. Ya da bir e\u011fitim platformunda, \u00f6\u011frencilerin ders notlar\u0131n\u0131 g\u00f6rselle\u015ftirebilecekleri interaktif bir tahta sunabilirsiniz. Excalidraw’\u0131n API’si, \u00e7izim verilerine programatik olarak eri\u015fmenize, elemanlar\u0131 eklemenize, g\u00fcncellemenize veya silmenize olanak tan\u0131r. Ayr\u0131ca, tuvalin durumunu dinleyebilir ve de\u011fi\u015fikliklere g\u00f6re kendi uygulaman\u0131z i\u00e7inde reaksiyonlar geli\u015ftirebilirsiniz.<\/p>\n

    \nimport Excalidraw from \"@excalidraw\/excalidraw\";\n\nfunction MyApp() {\n  return (\n    
    \n       console.log(\"Tuval De\u011fi\u015fti:\", elements, appState)}\n        onPointerUpdate={(payload) => console.log(\"\u0130\u015faret\u00e7i G\u00fcncellendi:\", payload)}\n        UIOptions={{\n          canvasActions: {\n            changeViewBackgroundColor: true,\n            clearCanvas: true,\n            export: false, \/\/ D\u0131\u015fa aktarma se\u00e7ene\u011fini devre d\u0131\u015f\u0131 b\u0131rak\n            loadScene: true,\n            saveAsImage: true,\n            toggleTheme: true,\n            \/\/ Daha fazla UI se\u00e7ene\u011fi burada \u00f6zelle\u015ftirilebilir\n          }\n        }}\n      \/>\n    <\/div>\n  );\n}\n<\/pre>\n
    <\/code><\/p>\n
    Yukar\u0131daki \u00f6rnekte, @excalidraw\/excalidraw<\/code> paketi kullan\u0131larak bir React bile\u015feni i\u00e7ine Excalidraw tuvali nas\u0131l g\u00f6m\u00fclebilece\u011fi ve ba\u015flang\u0131\u00e7 verilerinin nas\u0131l sa\u011flanabilece\u011fi g\u00f6sterilmi\u015ftir. onChange<\/code> ve onPointerUpdate<\/code> gibi olay i\u015fleyicileri arac\u0131l\u0131\u011f\u0131yla tuvaldeki de\u011fi\u015fiklikleri yakalayabilir ve uygulaman\u0131z\u0131n mant\u0131\u011f\u0131na entegre edebilirsiniz. Ayr\u0131ca, UIOptions<\/code> prop'u ile Excalidraw aray\u00fcz\u00fcndeki baz\u0131 \u00f6\u011feleri (\u00f6rne\u011fin d\u0131\u015fa aktarma d\u00fc\u011fmesi veya tema de\u011fi\u015ftirme) a\u00e7\u0131p kapatarak kullan\u0131c\u0131 deneyimini \u00f6zelle\u015ftirebilirsiniz. Bu d\u00fczeydeki \u00f6zelle\u015ftirme, Excalidraw'\u0131 sadece bir ara\u00e7 olmaktan \u00e7\u0131kar\u0131p, uygulaman\u0131z\u0131n ayr\u0131lmaz bir par\u00e7as\u0131 haline getirmenize olanak tan\u0131r.<\/p>\n
    Excalidraw, ayr\u0131ca farkl\u0131 servislerle entegrasyonlar i\u00e7in de g\u00fc\u00e7l\u00fc bir potansiyel sunar. \u00d6rne\u011fin, Excalidraw diyagramlar\u0131n\u0131 do\u011frudan Notions, Obsidian gibi not alma uygulamalar\u0131na veya Miro gibi i\u015fbirli\u011fi platformlar\u0131na g\u00f6mmek m\u00fcmk\u00fcnd\u00fcr. Bu entegrasyonlar, Excalidraw'\u0131n sundu\u011fu el \u00e7izimi esteti\u011fini ve i\u015fbirli\u011fi \u00f6zelliklerini daha geni\u015f ekosistemlere ta\u015f\u0131yarak, kullan\u0131c\u0131lar\u0131n farkl\u0131 ara\u00e7lar aras\u0131nda sorunsuz bir deneyim ya\u015famas\u0131n\u0131 sa\u011flar. A\u00e7\u0131k kaynak olmas\u0131, toplulu\u011fun s\u00fcrekli olarak yeni \u00f6zellikler geli\u015ftirmesine ve mevcut sorunlar\u0131 gidermesine olanak tan\u0131r. Excalidraw'\u0131n GitHub deposunu takip ederek veya katk\u0131da bulunarak, bu dinamik ekosistemin bir par\u00e7as\u0131 olabilirsiniz. Geli\u015ftiriciler, kendi \u00f6zel ara\u00e7lar\u0131n\u0131 veya k\u00fct\u00fcphanelerini olu\u015fturarak Excalidraw'\u0131n yeteneklerini daha da geni\u015fletebilirler. \u00d6rne\u011fin, belirli bir alan (\u00f6rne\u011fin a\u011f diyagramlar\u0131 veya veri ak\u0131\u015f\u0131 diyagramlar\u0131) i\u00e7in \u00f6zel bir \u015fekil k\u00fct\u00fcphanesi geli\u015ftirebilir ve bunu di\u011fer kullan\u0131c\u0131larla payla\u015fabilirsiniz. Excalidraw'\u0131n temelinde modern web teknolojileri (React, TypeScript) yatmas\u0131, geli\u015ftiricilerin bu arac\u0131 \u00f6\u011frenmesini ve adapte etmesini kolayla\u015ft\u0131r\u0131r. Bu sayede, hem kullan\u0131c\u0131 deneyimi hem de geli\u015ftirici deneyimi a\u00e7\u0131s\u0131ndan Excalidraw, dijital \u00e7izim ara\u00e7lar\u0131 aras\u0131nda \u00f6ne \u00e7\u0131kan bir konuma sahiptir.<\/p>\n
    Diyagramlar\u0131n\u0131z\u0131 \u00c7evrimi\u00e7i Payla\u015fma ve Mobil Uyumlu Hale Getirme Y\u00f6ntemleri Nelerdir?<\/h2>\n
    Excalidraw ile olu\u015fturdu\u011funuz diyagramlar\u0131, statik bir g\u00f6r\u00fcnt\u00fcden \u00e7ok daha fazlas\u0131 olarak d\u00fc\u015f\u00fcnebilirsiniz. \u00c7evrimi\u00e7i payla\u015f\u0131m ve mobil uyumluluk, bu diyagramlar\u0131n eri\u015filebilirli\u011fini ve kullan\u0131m alanlar\u0131n\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131r\u0131r. Fikirlerinizi veya projelerinizi geni\u015f kitlelere ula\u015ft\u0131rmak i\u00e7in Excalidraw, \u00e7e\u015fitli payla\u015f\u0131m ve d\u0131\u015fa aktarma se\u00e7enekleri sunar.<\/p>\n
    Diyagramlar\u0131n\u0131z\u0131 \u00e7evrimi\u00e7i payla\u015fman\u0131n en basit yolu, Excalidraw'\u0131n kendi sunucular\u0131 \u00fczerinden sa\u011flad\u0131\u011f\u0131 g\u00fcvenli link payla\u015f\u0131m \u00f6zelli\u011fidir. Diyagram\u0131n\u0131z\u0131 tamamlad\u0131ktan sonra, sa\u011f \u00fcst k\u00f6\u015fedeki \"Kaydet\" veya \"D\u0131\u015fa Aktar\" se\u00e7eneklerine t\u0131klayarak, bir \"payla\u015f\u0131m ba\u011flant\u0131s\u0131\" olu\u015fturabilirsiniz. Bu ba\u011flant\u0131, diyagram\u0131n\u0131z\u0131n salt okunur bir s\u00fcr\u00fcm\u00fcn\u00fc sunar ve ba\u015fkalar\u0131n\u0131n onu g\u00f6r\u00fcnt\u00fclemesine olanak tan\u0131r. \u00d6zellikle hassas veriler i\u00e7ermeyen diyagramlar veya genel duyurular i\u00e7in bu y\u00f6ntem olduk\u00e7a pratiktir. Ayr\u0131ca, \"canl\u0131 i\u015fbirli\u011fi\" \u00f6zelli\u011fi sayesinde, birden fazla ki\u015fi ayn\u0131 anda bir diyagram \u00fczerinde \u00e7al\u0131\u015fabilir. Bu, uzak ekiplerin beyin f\u0131rt\u0131nas\u0131 yapmas\u0131 veya birlikte proje tasla\u011f\u0131 olu\u015fturmas\u0131 i\u00e7in m\u00fckemmeldir. Canl\u0131 oturumlar genellikle u\u00e7tan uca \u015fifreleme ile korunur, bu da verilerinizin g\u00fcvenli\u011fini sa\u011flar.<\/p>\n
    Diyagramlar\u0131n\u0131z\u0131 web sitelerinize veya blog yaz\u0131lar\u0131n\u0131za g\u00f6mmek isterseniz, Excalidraw \u00e7e\u015fitli d\u0131\u015fa aktarma formatlar\u0131 sunar. PNG ve SVG en yayg\u0131n kullan\u0131lan formatlard\u0131r. PNG, raster tabanl\u0131 bir g\u00f6r\u00fcnt\u00fc format\u0131d\u0131r ve \u00e7o\u011fu yerde sorunsuz bir \u015fekilde g\u00f6r\u00fcnt\u00fclenebilir. Ancak \u00f6l\u00e7eklenebilirlik a\u00e7\u0131s\u0131ndan dezavantajl\u0131d\u0131r; b\u00fcy\u00fct\u00fcld\u00fc\u011f\u00fcnde piksellenme g\u00f6r\u00fclebilir. Di\u011fer yandan, SVG (Scalable Vector Graphics), vekt\u00f6r tabanl\u0131 bir format oldu\u011fu i\u00e7in kaliteden \u00f6d\u00fcn vermeden her boyutta \u00f6l\u00e7eklenebilir. Bu \u00f6zelli\u011fi, \u00f6zellikle responsif (duyarl\u0131) web tasar\u0131mlar\u0131 i\u00e7in ideal hale getirir. SVG'yi do\u011frudan HTML i\u00e7ine g\u00f6mebilir veya CSS ile stilize edebilirsiniz.<\/p>\n
    \n\n\n\n    \n    \n    Excalidraw Diyagram\u0131 - Mobil Uyumlu<\/title>\n    <style>\n        body {\n            font-family: Arial, sans-serif;\n            margin: 20px;\n            background-color: #f4f4f4;\n        }\n        .diagram-container {\n            max-width: 90%; \/* Geni\u015f ekranlarda daha dar, mobil cihazlarda daha geni\u015f *\/\n            margin: auto;\n            border: 1px solid #ccc;\n            box-shadow: 2px 2px 8px rgba(0,0,0,0.1);\n            background-color: #fff;\n            padding: 15px;\n            box-sizing: border-box;\n            display: flex; \/* \u0130\u00e7 SVG'nin boyutunu y\u00f6netmek i\u00e7in *\/\n            justify-content: center;\n            align-items: center;\n        }\n        .diagram-container svg {\n            max-width: 100%; \/* SVG'nin kapsay\u0131c\u0131s\u0131na uyum sa\u011flamas\u0131n\u0131 sa\u011flar *\/\n            height: auto; \/* Oranlar\u0131 korur *\/\n            display: block; \/* Fazla bo\u015fluklar\u0131 kald\u0131r\u0131r *\/\n        }\n\n        \/* Mobil cihazlar i\u00e7in \u00f6zel stiller *\/\n        @media (max-width: 768px) {\n            .diagram-container {\n                max-width: 100%;\n                padding: 10px;\n            }\n            h2 {\n                font-size: 1.2em;\n            }\n        }\n        @media (max-width: 480px) {\n            .diagram-container {\n                border: none;\n                box-shadow: none;\n                padding: 5px;\n            }\n        }\n    <\/style>\n<\/head>\n<body>\n    <h2>Excalidraw ile Olu\u015fturulmu\u015f Mobil Uyumlu Diyagram \u00d6rne\u011fi<\/h2>\n    <p>A\u015fa\u011f\u0131daki diyagram, Excalidraw'dan SVG olarak d\u0131\u015fa aktar\u0131lm\u0131\u015f ve web sitesine mobil uyumlu bir \u015fekilde entegre edilmi\u015ftir. Taray\u0131c\u0131 penceresini k\u00fc\u00e7\u00fclterek responsive davran\u0131\u015f\u0131n\u0131 test edebilirsiniz.<\/p>\n    <div class=\"diagram-container\">\n        <!-- Buraya Excalidraw'dan d\u0131\u015fa aktard\u0131\u011f\u0131n\u0131z SVG kodunu yap\u0131\u015ft\u0131r\u0131n -->\n        <svg width=\"800\" height=\"400\" viewBox=\"0 0 800 400\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n          <!-- \u00d6rnek bir SVG diyagram i\u00e7eri\u011fi -->\n          <path d=\"M100 100L200 100L200 200L100 200L100 100Z\" stroke=\"#000\" stroke-width=\"2\" \/>\n          <text x=\"120\" y=\"150\" font-family=\"Virgil, 'Segoe UI Emoji'\" font-size=\"20px\" fill=\"#000\">Kutu 1<\/text>\n          <path d=\"M250 150L350 150\" stroke=\"#000\" stroke-width=\"2\" \/>\n          <path d=\"M350 150L340 145M350 150L340 155\" stroke=\"#000\" stroke-width=\"2\" \/>\n          <path d=\"M400 100L500 100L500 200L400 200L400 100Z\" stroke=\"#000\" stroke-width=\"2\" \/>\n          <text x=\"420\" y=\"150\" font-family=\"Virgil, 'Segoe UI Emoji'\" font-size=\"20px\" fill=\"#000\">Kutu 2<\/text>\n          <!-- Ger\u00e7ek Excalidraw SVG'si burada daha karma\u015f\u0131k olacakt\u0131r -->\n        <\/svg>\n    <\/div>\n    <p>SVG format\u0131n\u0131n esnekli\u011fi sayesinde, diyagramlar\u0131n\u0131z farkl\u0131 ekran boyutlar\u0131nda bile her zaman keskin ve okunakl\u0131 kal\u0131r.<\/p>\n<\/body>\n<\/html>\n<\/pre>\n<p><\/code><\/p>\n<p>Yukar\u0131daki HTML kod blo\u011fu, Excalidraw'dan d\u0131\u015fa aktard\u0131\u011f\u0131n\u0131z bir SVG diyagram\u0131n\u0131 web sayfan\u0131za nas\u0131l g\u00f6mece\u011finizi ve CSS medya sorgular\u0131 (<code>@media<\/code>) kullanarak mobil cihazlarda nas\u0131l daha iyi g\u00f6r\u00fcnece\u011fini g\u00f6stermektedir. <code>.diagram-container<\/code> s\u0131n\u0131f\u0131, diyagram\u0131n\u0131z i\u00e7in bir kapsay\u0131c\u0131 g\u00f6revi g\u00f6r\u00fcr ve <code>max-width: 100%; height: auto;<\/code> gibi \u00f6zelliklerle SVG'nin responsif davranmas\u0131n\u0131 sa\u011flar. Medya sorgular\u0131 ise belirli ekran geni\u015fliklerinde (\u00f6rne\u011fin 768 pikselden k\u00fc\u00e7\u00fck tabletler veya 480 pikselden k\u00fc\u00e7\u00fck telefonlar) stilleri de\u011fi\u015ftirerek daha iyi bir mobil deneyim sunar. Excalidraw'\u0131n kendisi de modern bir web uygulamas\u0131 olarak mobil uyumlulu\u011fa sahiptir. Uygulamaya bir mobil taray\u0131c\u0131dan eri\u015fti\u011finizde, aray\u00fcz otomatik olarak mobil ekranlara uyacak \u015fekilde optimize edilir. Dokunmatik ekran kontrolleri ve daha b\u00fcy\u00fck d\u00fc\u011fmeler, k\u00fc\u00e7\u00fck ekranlarda bile rahat bir kullan\u0131m sa\u011flar. Bu sayede, diyagramlar\u0131n\u0131z\u0131 mobil cihaz\u0131n\u0131zda g\u00f6r\u00fcnt\u00fclemekle kalmaz, ayn\u0131 zamanda h\u0131zl\u0131 d\u00fczenlemeler yapabilir veya yeni \u00e7izimler olu\u015fturabilirsiniz. Sonu\u00e7 olarak, Excalidraw sadece g\u00fc\u00e7l\u00fc bir \u00e7izim arac\u0131 de\u011fil, ayn\u0131 zamanda diyagramlar\u0131n\u0131z\u0131 dijital ortamlarda etkili bir \u015fekilde payla\u015fman\u0131za ve farkl\u0131 cihazlarda kusursuz bir deneyim sunman\u0131za olanak tan\u0131yan bir platformdur.<\/p>\n<h2 id=\"sonuc-excalidraw-gelecegin-diyagram-aracimi-ve-sikca-sorulan-sorular\">Sonu\u00e7: Excalidraw Gelece\u011fin Diyagram Arac\u0131m\u0131 ve S\u0131k\u00e7a Sorulan Sorular?<\/h2>\n<p>Excalidraw, dijital diyagram \u00e7izim d\u00fcnyas\u0131na taze bir soluk getirerek, \"el \u00e7izimi\" esteti\u011fini modern web teknolojileriyle bulu\u015fturdu. Bu makale boyunca, Excalidraw'\u0131n temel \u00f6zelliklerinden ad\u0131m ad\u0131m diyagram olu\u015fturma s\u00fcre\u00e7lerine, verimlili\u011fi art\u0131ran ipu\u00e7lar\u0131ndan ger\u00e7ek d\u00fcnya senaryolar\u0131na ve hatta geli\u015ftirici odakl\u0131 entegrasyonlar\u0131na kadar geni\u015f bir yelpazeyi ele ald\u0131k. G\u00f6rd\u00fc\u011f\u00fcm\u00fcz gibi, Excalidraw sadece h\u0131zl\u0131 ve etkili g\u00f6rselle\u015ftirmeler yapmakla kalm\u0131yor, ayn\u0131 zamanda kullan\u0131c\u0131lar ve ekipler aras\u0131nda daha samimi ve i\u015fbirlik\u00e7i bir ortam yarat\u0131yor. A\u00e7\u0131k kaynakl\u0131 yap\u0131s\u0131, taray\u0131c\u0131 tabanl\u0131 eri\u015filebilirli\u011fi ve s\u00fcrekli geli\u015fen toplulu\u011fu sayesinde, Excalidraw'\u0131n gelecekte dijital tahta ve diyagram ara\u00e7lar\u0131 pazar\u0131nda \u00f6nemli bir oyuncu olmaya devam edece\u011fi ku\u015fkusuzdur. Fikirlerinizi serbest\u00e7e ifade etmek, karma\u015f\u0131k s\u00fcre\u00e7leri basitle\u015ftirmek ve estetik a\u00e7\u0131dan \u00e7ekici g\u00f6rseller olu\u015fturmak isteyen herkes i\u00e7in Excalidraw, kesinlikle denemeye de\u011fer bir ara\u00e7t\u0131r. Minimalist aray\u00fcz\u00fc, g\u00fc\u00e7l\u00fc \u00f6zellikleri ve topluluk deste\u011fiyle, Excalidraw, dijital \u00e7izim deneyimini yeniden tan\u0131ml\u0131yor.<\/p>\n<h3 id=\"sikca-sorulan-sorular-sss\">S\u0131k\u00e7a Sorulan Sorular (SSS)<\/h3>\n<p>Excalidraw hakk\u0131nda merak edilen baz\u0131 sorular\u0131 ve cevaplar\u0131n\u0131 a\u015fa\u011f\u0131da bulabilirsiniz:<\/p>\n<ul>\n<li><strong>Excalidraw \u00fccretli mi?<\/strong>\n<p>Hay\u0131r, Excalidraw'\u0131n temel s\u00fcr\u00fcm\u00fc tamamen \u00fccretsiz ve a\u00e7\u0131k kaynakl\u0131d\u0131r. Herkes <a href=\"https:\/\/excalidraw.com\" target=\"_blank\">excalidraw.com<\/a> adresinden veya kendi kendine bar\u0131nd\u0131rma yoluyla kullanabilir. Ancak, Excalidraw+' ad\u0131nda bir abonelik hizmeti de mevcuttur. Bu hizmet, bulut depolama, s\u00fcr\u00fcm kontrol\u00fc, organizasyonel k\u00fct\u00fcphaneler ve ekip y\u00f6netimi gibi ek \u00f6zellikler sunarak profesyonel kullan\u0131c\u0131lara y\u00f6nelik \u00e7\u00f6z\u00fcmler sunar.<\/p>\n<\/li>\n<li><strong>Excalidraw \u00e7evrimd\u0131\u015f\u0131 \u00e7al\u0131\u015f\u0131yor mu?<\/strong>\n<p>Evet, Excalidraw \u00e7evrimd\u0131\u015f\u0131 \u00e7al\u0131\u015fabilir. Bir kez taray\u0131c\u0131n\u0131zda a\u00e7t\u0131ktan sonra, internet ba\u011flant\u0131n\u0131z kesilse bile \u00e7izim yapmaya devam edebilirsiniz. Taray\u0131c\u0131n\u0131z, uygulaman\u0131n gerekli dosyalar\u0131n\u0131 \u00f6nbelle\u011fe al\u0131r. Ancak, \u00e7izimlerinizi kaydetmek veya canl\u0131 i\u015fbirli\u011fi yapmak i\u00e7in internet ba\u011flant\u0131s\u0131 gereklidir. \u00c7evrimd\u0131\u015f\u0131 \u00e7al\u0131\u015f\u0131rken yapt\u0131\u011f\u0131n\u0131z de\u011fi\u015fiklikleri, ba\u011flant\u0131n\u0131z geri geldi\u011finde kaydedebilirsiniz.<\/p>\n<\/li>\n<li><strong>Hangi dosya formatlar\u0131n\u0131 destekler?<\/strong>\n<p>Excalidraw, diyagramlar\u0131n\u0131z\u0131 PNG (raster g\u00f6r\u00fcnt\u00fc), SVG (vekt\u00f6r grafik) ve JSON (d\u00fczenlenebilir veri format\u0131) olarak d\u0131\u015fa aktarman\u0131za olanak tan\u0131r. SVG format\u0131, kaliteden \u00f6d\u00fcn vermeden \u00f6l\u00e7eklenebilirlik sa\u011flarken, JSON format\u0131 diyagram\u0131n\u0131z\u0131 daha sonra d\u00fczenleyebilece\u011finiz \u015fekilde saklar.<\/p>\n<\/li>\n<li><strong>Excalidraw'da verilerim g\u00fcvende mi?<\/strong>\n<p>Excalidraw'\u0131n varsay\u0131lan uygulamas\u0131, \u00e7izim verilerinizi do\u011frudan sunucular\u0131na kaydetmez. Payla\u015f\u0131lan veya i\u015fbirli\u011fi yap\u0131lan oturumlar i\u00e7in, veriler u\u00e7tan uca \u015fifreleme ile g\u00f6nderilir. Bu, Excalidraw sunucular\u0131n\u0131n bile diyagramlar\u0131n\u0131z\u0131n i\u00e7eri\u011fini g\u00f6remedi\u011fi anlam\u0131na gelir. Excalidraw+ gibi \u00fccretli hizmetler, bulut depolama sa\u011flarken, bu depolaman\u0131n da g\u00fcvenlik protokolleriyle korundu\u011funu belirtirler. Her zaman gizli veya hassas bilgileri payla\u015f\u0131rken dikkatli olman\u0131z \u00f6nemlidir.<\/p>\n<\/li>\n<li><strong>Excalidraw ekip \u00e7al\u0131\u015fmas\u0131na uygun mu?<\/strong>\n<p>Kesinlikle! Excalidraw, canl\u0131 i\u015fbirli\u011fi \u00f6zelli\u011fi sayesinde birden fazla kullan\u0131c\u0131n\u0131n ayn\u0131 anda ayn\u0131 diyagram \u00fczerinde \u00e7al\u0131\u015fmas\u0131na olanak tan\u0131r. Bu \u00f6zellik, uzaktan \u00e7al\u0131\u015fan ekipler, beyin f\u0131rt\u0131nas\u0131 oturumlar\u0131 veya e\u011fitim ortamlar\u0131 i\u00e7in idealdir. Her kat\u0131l\u0131mc\u0131n\u0131n imleci farkl\u0131 bir renkle g\u00f6sterilir, bu da kimin nerede \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 g\u00f6rmeyi kolayla\u015ft\u0131r\u0131r ve ger\u00e7ek zamanl\u0131 etkile\u015fimi art\u0131r\u0131r.<\/p>\n<\/li>\n<\/ul>\n<p><\/body><\/p>\n","protected":false},"excerpt":{"rendered":"Excalidraw, taray\u0131c\u0131 tabanl\u0131, el \u00e7izimi g\u00f6r\u00fcn\u00fcml\u00fc diyagramlar olu\u015fturmak i\u00e7in ideal bir ara\u00e7t\u0131r. Fikirlerinizi h\u0131zl\u0131ca g\u00f6rselle\u015ftirmek mi istiyorsunuz? Bu…","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-33353","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v20.5 (Yoast SEO v25.3.1) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Excalidraw ile El \u00c7izimi G\u00f6r\u00fcn\u00fcml\u00fc Diyagramlar Olu\u015fturun<\/title>\n<meta name=\"description\" content=\"Excalidraw, taray\u0131c\u0131 tabanl\u0131, el \u00e7izimi g\u00f6r\u00fcn\u00fcml\u00fc diyagramlar olu\u015fturmak i\u00e7in ideal bir ara\u00e7t\u0131r. Fikirlerinizi h\u0131zl\u0131ca g\u00f6rselle\u015ftirmek mi istiyorsunuz? Bu makalede Excalidraw'\u0131n temel kullan\u0131m\u0131ndan ileri seviye ipu\u00e7lar\u0131na kadar her \u015feyi ke\u015ffedin.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/excalidraw-ile-el-cizimi-gorunumlu-diyagramlar-olusturun\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Excalidraw ile El \u00c7izimi G\u00f6r\u00fcn\u00fcml\u00fc Diyagramlar Olu\u015fturun\" \/>\n<meta property=\"og:description\" content=\"Excalidraw, taray\u0131c\u0131 tabanl\u0131, el \u00e7izimi g\u00f6r\u00fcn\u00fcml\u00fc diyagramlar olu\u015fturmak i\u00e7in ideal bir ara\u00e7t\u0131r. Fikirlerinizi h\u0131zl\u0131ca g\u00f6rselle\u015ftirmek mi istiyorsunuz? Bu makalede Excalidraw'\u0131n temel kullan\u0131m\u0131ndan ileri seviye ipu\u00e7lar\u0131na kadar her \u015feyi ke\u015ffedin.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/excalidraw-ile-el-cizimi-gorunumlu-diyagramlar-olusturun\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-11-01T20:01:37+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"23 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/excalidraw-ile-el-cizimi-gorunumlu-diyagramlar-olusturun\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/excalidraw-ile-el-cizimi-gorunumlu-diyagramlar-olusturun\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"Excalidraw ile El \u00c7izimi G\u00f6r\u00fcn\u00fcml\u00fc Diyagramlar Olu\u015fturun\",\"datePublished\":\"2025-11-01T20:01:37+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/excalidraw-ile-el-cizimi-gorunumlu-diyagramlar-olusturun\/\"},\"wordCount\":4452,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/excalidraw-ile-el-cizimi-gorunumlu-diyagramlar-olusturun\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/excalidraw-ile-el-cizimi-gorunumlu-diyagramlar-olusturun\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/excalidraw-ile-el-cizimi-gorunumlu-diyagramlar-olusturun\/\",\"name\":\"Excalidraw ile El \u00c7izimi G\u00f6r\u00fcn\u00fcml\u00fc Diyagramlar Olu\u015fturun\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-11-01T20:01:37+00:00\",\"description\":\"Excalidraw, taray\u0131c\u0131 tabanl\u0131, el \u00e7izimi g\u00f6r\u00fcn\u00fcml\u00fc diyagramlar olu\u015fturmak i\u00e7in ideal bir ara\u00e7t\u0131r. Fikirlerinizi h\u0131zl\u0131ca g\u00f6rselle\u015ftirmek mi istiyorsunuz? Bu makalede Excalidraw'\u0131n temel kullan\u0131m\u0131ndan ileri seviye ipu\u00e7lar\u0131na kadar her \u015feyi ke\u015ffedin.\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/excalidraw-ile-el-cizimi-gorunumlu-diyagramlar-olusturun\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/excalidraw-ile-el-cizimi-gorunumlu-diyagramlar-olusturun\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/excalidraw-ile-el-cizimi-gorunumlu-diyagramlar-olusturun\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Excalidraw ile El \u00c7izimi G\u00f6r\u00fcn\u00fcml\u00fc Diyagramlar Olu\u015fturun\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Excalidraw ile El \u00c7izimi G\u00f6r\u00fcn\u00fcml\u00fc Diyagramlar Olu\u015fturun","description":"Excalidraw, taray\u0131c\u0131 tabanl\u0131, el \u00e7izimi g\u00f6r\u00fcn\u00fcml\u00fc diyagramlar olu\u015fturmak i\u00e7in ideal bir ara\u00e7t\u0131r. Fikirlerinizi h\u0131zl\u0131ca g\u00f6rselle\u015ftirmek mi istiyorsunuz? Bu makalede Excalidraw'\u0131n temel kullan\u0131m\u0131ndan ileri seviye ipu\u00e7lar\u0131na kadar her \u015feyi ke\u015ffedin.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/excalidraw-ile-el-cizimi-gorunumlu-diyagramlar-olusturun\/","og_locale":"tr_TR","og_type":"article","og_title":"Excalidraw ile El \u00c7izimi G\u00f6r\u00fcn\u00fcml\u00fc Diyagramlar Olu\u015fturun","og_description":"Excalidraw, taray\u0131c\u0131 tabanl\u0131, el \u00e7izimi g\u00f6r\u00fcn\u00fcml\u00fc diyagramlar olu\u015fturmak i\u00e7in ideal bir ara\u00e7t\u0131r. Fikirlerinizi h\u0131zl\u0131ca g\u00f6rselle\u015ftirmek mi istiyorsunuz? Bu makalede Excalidraw'\u0131n temel kullan\u0131m\u0131ndan ileri seviye ipu\u00e7lar\u0131na kadar her \u015feyi ke\u015ffedin.","og_url":"https:\/\/fatihsoysal.com\/blog\/excalidraw-ile-el-cizimi-gorunumlu-diyagramlar-olusturun\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-11-01T20:01:37+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"23 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/excalidraw-ile-el-cizimi-gorunumlu-diyagramlar-olusturun\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/excalidraw-ile-el-cizimi-gorunumlu-diyagramlar-olusturun\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"Excalidraw ile El \u00c7izimi G\u00f6r\u00fcn\u00fcml\u00fc Diyagramlar Olu\u015fturun","datePublished":"2025-11-01T20:01:37+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/excalidraw-ile-el-cizimi-gorunumlu-diyagramlar-olusturun\/"},"wordCount":4452,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/excalidraw-ile-el-cizimi-gorunumlu-diyagramlar-olusturun\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/excalidraw-ile-el-cizimi-gorunumlu-diyagramlar-olusturun\/","url":"https:\/\/fatihsoysal.com\/blog\/excalidraw-ile-el-cizimi-gorunumlu-diyagramlar-olusturun\/","name":"Excalidraw ile El \u00c7izimi G\u00f6r\u00fcn\u00fcml\u00fc Diyagramlar Olu\u015fturun","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-11-01T20:01:37+00:00","description":"Excalidraw, taray\u0131c\u0131 tabanl\u0131, el \u00e7izimi g\u00f6r\u00fcn\u00fcml\u00fc diyagramlar olu\u015fturmak i\u00e7in ideal bir ara\u00e7t\u0131r. Fikirlerinizi h\u0131zl\u0131ca g\u00f6rselle\u015ftirmek mi istiyorsunuz? Bu makalede Excalidraw'\u0131n temel kullan\u0131m\u0131ndan ileri seviye ipu\u00e7lar\u0131na kadar her \u015feyi ke\u015ffedin.","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/excalidraw-ile-el-cizimi-gorunumlu-diyagramlar-olusturun\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/excalidraw-ile-el-cizimi-gorunumlu-diyagramlar-olusturun\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/excalidraw-ile-el-cizimi-gorunumlu-diyagramlar-olusturun\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Excalidraw ile El \u00c7izimi G\u00f6r\u00fcn\u00fcml\u00fc Diyagramlar Olu\u015fturun"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/33353","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=33353"}],"version-history":[{"count":0,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/33353\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=33353"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=33353"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=33353"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}