{"id":31206,"date":"2025-10-07T06:31:21","date_gmt":"2025-10-07T03:31:21","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/mermaidxp-diyagram-olusturmada-yeni-boyutlar-ve-katki-rehberi\/"},"modified":"2025-10-07T06:31:21","modified_gmt":"2025-10-07T03:31:21","slug":"mermaidxp-diyagram-olusturmada-yeni-boyutlar-ve-katki-rehberi","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/mermaidxp-diyagram-olusturmada-yeni-boyutlar-ve-katki-rehberi\/","title":{"rendered":"MermaidXP: Diyagram Olu\u015fturmada Yeni Boyutlar ve Katk\u0131 Rehberi"},"content":{"rendered":"<p>Karma\u015f\u0131k fikirleri ve s\u00fcre\u00e7leri g\u00f6rselle\u015ftirmek, modern yaz\u0131l\u0131m geli\u015ftirme ve proje y\u00f6netiminde vazge\u00e7ilmez bir unsurdur. MermaidXP, a\u00e7\u0131k kaynak toplulu\u011funun g\u00fcc\u00fcyle metin tabanl\u0131 diyagramlar olu\u015fturmay\u0131 bir \u00fcst seviyeye ta\u015f\u0131yor. Bu rehberde MermaidXP&#8217;nin ne oldu\u011funu, nas\u0131l kullan\u0131ld\u0131\u011f\u0131n\u0131 ve projesine nas\u0131l katk\u0131da bulunabilece\u011finizi ke\u015ffedeceksiniz. Hemen deneyin: <a href=\"https:\/\/mxp.apulab.com\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/mxp.apulab.com<\/a> veya katk\u0131da bulunmak i\u00e7in repoyu ziyaret edin: <a href=\"https:\/\/github.com\/ccvass\/mermaidxp\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/github.com\/ccvass\/mermaidxp<\/a>.<\/p>\n<p>Geli\u015fen teknoloji d\u00fcnyas\u0131nda, fikirleri, s\u00fcre\u00e7leri veya sistem mimarilerini etkili bir \u015fekilde a\u00e7\u0131klamak giderek karma\u015f\u0131k hale geliyor. Metin tabanl\u0131 a\u00e7\u0131klamalar, bazen detay\u0131n i\u00e7inde kaybolmam\u0131za neden olabilirken, g\u00f6rselle\u015ftirme bu karma\u015f\u0131kl\u0131\u011f\u0131 sadele\u015ftirmenin en g\u00fc\u00e7l\u00fc yollar\u0131ndan biridir. Bir ak\u0131\u015f \u015femas\u0131, bir projenin ilerleyi\u015fini anlatan bir Gantt \u015femas\u0131 veya bir yaz\u0131l\u0131m\u0131n bile\u015fenlerini g\u00f6steren bir UML diyagram\u0131, binlerce kelimeyle anlat\u0131lamayacak kadar \u00e7ok bilgiyi tek bir bak\u0131\u015fta sunar. Bu nedenle diyagramlar, \u00f6zellikle yaz\u0131l\u0131m geli\u015ftirme, proje y\u00f6netimi ve i\u015f analizi gibi alanlarda vazge\u00e7ilmez bir ileti\u015fim arac\u0131 haline gelmi\u015ftir.<\/p>\n<p>Peki, bu kadar etkili olan diyagramlar\u0131 olu\u015fturman\u0131n en verimli yolu nedir? Geleneksel g\u00f6rsel ara\u00e7lar genellikle bir s\u00fcr\u00fckle-b\u0131rak aray\u00fcz\u00fc sunar, ancak bu y\u00f6ntemler b\u00fcy\u00fck ve karma\u015f\u0131k projelerde zaman al\u0131c\u0131 olabilir, versiyon kontrol sistemleriyle entegrasyonda zorluklar \u00e7\u0131karabilir ve ekip i\u00e7i i\u015fbirli\u011fini sekteye u\u011fratabilir. \u0130\u015fte tam bu noktada, metin tabanl\u0131 diyagram ara\u00e7lar\u0131 devreye girer. Mermaid, pop\u00fclerli\u011fini bu ihtiyac\u0131 kar\u015f\u0131lamas\u0131 sayesinde kazanm\u0131\u015f, kullan\u0131c\u0131lar\u0131n basit metin kodlar\u0131 yazarak profesyonel kalitede diyagramlar olu\u015fturmas\u0131na olanak tan\u0131yan bir ara\u00e7t\u0131r. Diyagramlar\u0131 do\u011frudan kod depolar\u0131n\u0131zda saklayabilir, de\u011fi\u015fiklikleri kolayca takip edebilir ve h\u0131zl\u0131ca g\u00fcncelleyebilirsiniz.<\/p>\n<p>MermaidXP ise, bu harika temelin \u00fczerine in\u015fa edilmi\u015f, topluluk odakl\u0131, geli\u015ftirilmi\u015f \u00f6zellikler sunan ve daha interaktif bir kullan\u0131c\u0131 deneyimi vadeden bir sonraki ad\u0131md\u0131r. MermaidXP ile sadece diyagram olu\u015fturmakla kalmaz, ayn\u0131 zamanda bu diyagramlar\u0131n daha dinamik, daha anla\u015f\u0131l\u0131r ve daha entegre olmas\u0131n\u0131 sa\u011flayan yenilik\u00e7i yakla\u015f\u0131mlar\u0131 deneyimlersiniz. A\u00e7\u0131k kaynak felsefesiyle hareket eden bu platform, herkesin katk\u0131da bulunarak projenin gelece\u011fini \u015fekillendirmesine imkan tan\u0131r. Dolay\u0131s\u0131yla, ister yeni ba\u015flayan bir geli\u015ftirici olun, ister deneyimli bir proje y\u00f6neticisi, MermaidXP karma\u015f\u0131k fikirlerinizi somut ve anla\u015f\u0131l\u0131r g\u00f6rsellere d\u00f6n\u00fc\u015ft\u00fcrmek i\u00e7in size g\u00fc\u00e7l\u00fc bir ara\u00e7 seti sunar. G\u00f6rselle\u015ftirmenin g\u00fcc\u00fcn\u00fc ke\u015ffetmeye haz\u0131rsan\u0131z, MermaidXP tam da arad\u0131\u011f\u0131n\u0131z \u00e7\u00f6z\u00fcm olabilir.<\/p>\n<h2>MermaidXP Nedir ve Diyagram Olu\u015fturmay\u0131 Nas\u0131l Kolayla\u015ft\u0131r\u0131r?<\/h2>\n<p>MermaidXP, pop\u00fcler a\u00e7\u0131k kaynak diyagram olu\u015fturma arac\u0131 Mermaid&#8217;in yeteneklerini daha da ileriye ta\u015f\u0131yan, topluluk odakl\u0131 yeni nesil bir projedir. Temel olarak, metin tabanl\u0131 tan\u0131mlamalardan profesyonel g\u00f6r\u00fcn\u00fcml\u00fc diyagramlar \u00fcretmeyi ama\u00e7lar. Geleneksel olarak, ak\u0131\u015f \u015femalar\u0131, UML diyagramlar\u0131 veya Gantt \u015femalar\u0131 gibi g\u00f6rselle\u015ftirme ara\u00e7lar\u0131 genellikle karma\u015f\u0131k grafik tasar\u0131m yaz\u0131l\u0131mlar\u0131 veya \u00f6zel ara\u00e7lar gerektirir. Bu durum, \u00f6zellikle s\u00fcr\u00fcm kontrol sistemleri (Git gibi) ile \u00e7al\u0131\u015f\u0131rken veya dok\u00fcmantasyonu h\u0131zl\u0131ca g\u00fcncellemek gerekti\u011finde \u00f6nemli zorluklara yol a\u00e7abilir. MermaidXP, bu zorluklar\u0131 ortadan kald\u0131rarak diyagram olu\u015fturma s\u00fcrecini basitle\u015ftirir ve geli\u015ftirici dostu bir yakla\u015f\u0131m sunar.<\/p>\n<p>MermaidXP&#8217;yi farkl\u0131 k\u0131lan temel \u00f6zellikler \u015funlard\u0131r:<\/p>\n<ul>\n<li><strong>Metin Tabanl\u0131 Tan\u0131mlama:<\/strong> Diyagramlar\u0131 g\u00f6rsel bir aray\u00fczde s\u00fcr\u00fckle-b\u0131rak yapmak yerine, basit ve anla\u015f\u0131lmas\u0131 kolay bir Markdown benzeri sintaks kullanarak tan\u0131mlars\u0131n\u0131z. Bu, diyagramlar\u0131n\u0131z\u0131n kod ile birlikte saklanabilmesini, versiyon kontrol alt\u0131nda tutulabilmesini ve ekip i\u00e7inde kolayca payla\u015f\u0131labilmesini sa\u011flar.<\/li>\n<li><strong>Geni\u015f Diyagram Deste\u011fi:<\/strong> Mermaid&#8217;in sundu\u011fu t\u00fcm diyagram t\u00fcrlerini destekler ve gelecekte yeni t\u00fcrlerle geni\u015flemeyi hedefler. Bunlar aras\u0131nda ak\u0131\u015f \u015femalar\u0131 (flowcharts), s\u0131ra diyagramlar\u0131 (sequence diagrams), Gantt \u015femalar\u0131, s\u0131n\u0131f diyagramlar\u0131 (class diagrams), durum diyagramlar\u0131 (state diagrams), ER diyagramlar\u0131 (entity relationship diagrams), kullan\u0131c\u0131 yolculu\u011fu diyagramlar\u0131 (user journey maps) ve daha fazlas\u0131 bulunur.<\/li>\n<li><strong>Topluluk Odakl\u0131 Geli\u015fim:<\/strong> A\u00e7\u0131k kaynak bir proje olarak, MermaidXP toplulu\u011fun geri bildirimleri ve katk\u0131lar\u0131yla geli\u015fir. Bu sayede, kullan\u0131c\u0131 ihtiya\u00e7lar\u0131na daha h\u0131zl\u0131 yan\u0131t verebilir ve s\u00fcrekli olarak yenilik\u00e7i \u00f6zelliklerle zenginle\u015fir.<\/li>\n<li><strong>\u0130nteraktif Deneyim:<\/strong> mxp.apulab.com gibi platformlar arac\u0131l\u0131\u011f\u0131yla, yazd\u0131\u011f\u0131n\u0131z metinleri an\u0131nda g\u00f6rsel diyagramlara d\u00f6n\u00fc\u015ft\u00fcrebilir, bu sayede h\u0131zl\u0131 prototipleme ve geri bildirim d\u00f6ng\u00fcleri sa\u011flayabilirsiniz.<\/li>\n<li><strong>Entegrasyon Kolayl\u0131\u011f\u0131:<\/strong> MermaidXP \u00e7\u0131kt\u0131s\u0131 genellikle SVG tabanl\u0131 oldu\u011fu i\u00e7in, web sitelerine, Markdown belgelerine (GitHub, GitLab gibi), Confluence veya Jira gibi ara\u00e7lara kolayca entegre edilebilir. Bu sayede teknik dok\u00fcmantasyonunuzu zenginle\u015ftirmek \u00e7ok daha basit hale gelir.<\/li>\n<\/ul>\n<p>Bir \u00f6rnekle a\u00e7\u0131klamak gerekirse, bir ak\u0131\u015f \u015femas\u0131 olu\u015fturmak i\u00e7in geleneksel bir ara\u00e7ta oklar\u0131 ve kutular\u0131 manuel olarak yerle\u015ftirmeniz gerekirken, MermaidXP&#8217;de sadece birka\u00e7 sat\u0131r metin yazars\u0131n\u0131z. Bu, \u00f6zellikle karma\u015f\u0131k sistemler veya \u00e7ok say\u0131da ad\u0131m i\u00e7eren s\u00fcre\u00e7ler i\u00e7in inan\u0131lmaz bir zaman tasarrufu ve verimlilik art\u0131\u015f\u0131 sa\u011flar. Diyagramlar\u0131n metin olarak ifade edilmesi, ayr\u0131ca kod incelemesi s\u00fcre\u00e7lerine benzer \u015fekilde, ekip \u00fcyelerinin diyagram de\u011fi\u015fikliklerini g\u00f6zden ge\u00e7irmesine ve yorum yapmas\u0131na olanak tan\u0131r, bu da i\u015fbirli\u011fini te\u015fvik eder.<\/p>\n<div class=\"expert-tip\">\n    Uzman \u0130pucu: Mermaid&#8217;in metin tabanl\u0131 yap\u0131s\u0131, diyagramlar\u0131n\u0131z\u0131 do\u011frudan kod deponuzda (\u00f6rne\u011fin Git ile) saklaman\u0131z\u0131 ve s\u00fcr\u00fcm kontrol\u00fc alt\u0131nda tutman\u0131z\u0131 sa\u011flar. Bu, diyagramlar\u0131n\u0131z\u0131n projenizin di\u011fer kod bile\u015fenleri gibi g\u00fcncellenmesini, ge\u00e7mi\u015f s\u00fcr\u00fcmlerine eri\u015filmesini ve de\u011fi\u015fikliklerin takip edilmesini kolayla\u015ft\u0131r\u0131r. B\u00f6ylece, teknik dok\u00fcmantasyonunuz her zaman g\u00fcncel kal\u0131r ve projenin evrimiyle paralel ilerler.\n<\/div>\n<p>\u00d6zetle, MermaidXP diyagram olu\u015fturma s\u00fcrecini sadece g\u00f6rselle\u015ftirmekle kalmaz, ayn\u0131 zamanda onu modern yaz\u0131l\u0131m geli\u015ftirme i\u015f ak\u0131\u015flar\u0131na kusursuz bir \u015fekilde entegre eder. Bu da, ekip \u00fcyelerinin daha verimli \u00e7al\u0131\u015fmas\u0131na, karma\u015f\u0131k konular\u0131 daha iyi anlamas\u0131na ve sonu\u00e7 olarak daha ba\u015far\u0131l\u0131 projeler ortaya \u00e7\u0131karmas\u0131na yard\u0131mc\u0131 olur. \u0130ster basit bir ak\u0131\u015f \u015femas\u0131, ister kapsaml\u0131 bir sistem mimarisi tasarl\u0131yor olun, MermaidXP s\u00fcreci hem h\u0131zland\u0131r\u0131r hem de basitle\u015ftirir.<\/p>\n<h2>MermaidXP ile \u0130lk Diyagram\u0131n\u0131z\u0131 Nas\u0131l Olu\u015fturursunuz? Ad\u0131m Ad\u0131m Rehber<\/h2>\n<p>MermaidXP ile diyagram olu\u015fturmak, \u015fa\u015f\u0131rt\u0131c\u0131 derecede kolay ve h\u0131zl\u0131d\u0131r. Temel mant\u0131k, bir programlama diline benzer bir sintaks kullanarak diyagram\u0131n\u0131z\u0131 tan\u0131mlamak ve sistemin onu g\u00f6rsel olarak olu\u015fturmas\u0131n\u0131 sa\u011flamakt\u0131r. Bu b\u00f6l\u00fcmde, mxp.apulab.com platformunu kullanarak birka\u00e7 pop\u00fcler diyagram t\u00fcr\u00fcn\u00fc ad\u0131m ad\u0131m nas\u0131l olu\u015fturaca\u011f\u0131n\u0131z\u0131 g\u00f6rece\u011fiz. Bu \u00f6rnekler, MermaidXP&#8217;nin g\u00fcc\u00fcn\u00fc ve esnekli\u011fini anlaman\u0131za yard\u0131mc\u0131 olacakt\u0131r.<\/p>\n<h3>1. Basit Bir Ak\u0131\u015f \u015eemas\u0131 (Flowchart) Olu\u015fturma<\/h3>\n<p>Ak\u0131\u015f \u015femalar\u0131, bir s\u00fcrecin ad\u0131mlar\u0131n\u0131 ve karar noktalar\u0131n\u0131 g\u00f6rselle\u015ftirmek i\u00e7in kullan\u0131l\u0131r. MermaidXP ile bir ak\u0131\u015f \u015femas\u0131 olu\u015fturmak i\u00e7in <code>graph<\/code> anahtar kelimesini ve y\u00f6nlendirmeyi (\u00f6rne\u011fin <code>TD<\/code> yukar\u0131dan a\u015fa\u011f\u0131ya veya <code>LR<\/code> soldan sa\u011fa) belirtiriz. Ard\u0131ndan, d\u00fc\u011f\u00fcmleri tan\u0131mlar ve oklarla aralar\u0131ndaki ili\u015fkileri kurar\u0131z. mxp.apulab.com adresine giderek a\u015fa\u011f\u0131daki kodu yap\u0131\u015ft\u0131r\u0131p an\u0131nda sonucunu g\u00f6rebilirsiniz.<\/p>\n<pre><code>\ngraph TD\n    A[Ba\u015fla] --> B{Giri\u015f Kontrol\u00fc?}\n    B -- Evet --> C(Veri \u0130\u015fle)\n    B -- Hay\u0131r --> D[Hata Mesaj\u0131 G\u00f6ster]\n    C --> E[Sonu\u00e7 G\u00f6ster]\n    D --> F[Bitir]\n    E --> F\n<\/pre>\n<p><\/code><\/p>\n<p>Yukar\u0131daki kodda:<\/p>\n<ul>\n<li><code>graph TD<\/code>: Diyagram\u0131n bir ak\u0131\u015f \u015femas\u0131 oldu\u011funu ve yukar\u0131dan a\u015fa\u011f\u0131ya (Top-Down) y\u00f6nde \u00e7izilece\u011fini belirtir.<\/li>\n<li><code>A[Ba\u015fla]<\/code>: \"Ba\u015fla\" etiketli bir dikd\u00f6rtgen d\u00fc\u011f\u00fcm tan\u0131mlar. K\u00f6\u015feli parantezler <code>[]<\/code> d\u00fc\u011f\u00fcm \u015feklini belirtir.<\/li>\n<li><code>B{Giri\u015f Kontrol\u00fc?}<\/code>: \"Giri\u015f Kontrol\u00fc?\" etiketli bir baklava dilimi (karar noktas\u0131) d\u00fc\u011f\u00fcm tan\u0131mlar. S\u00fcsl\u00fc parantezler <code>{}<\/code> karar d\u00fc\u011f\u00fcm\u00fcn\u00fc ifade eder.<\/li>\n<li><code>C(Veri \u0130\u015fle)<\/code>: \"Veri \u0130\u015fle\" etiketli yuvarlak kenarl\u0131 bir d\u00fc\u011f\u00fcm tan\u0131mlar. Normal parantezler <code>()<\/code> yuvarlak kenarl\u0131 d\u00fc\u011f\u00fcm\u00fc belirtir.<\/li>\n<li><code>A --> B<\/code>: A d\u00fc\u011f\u00fcm\u00fcnden B d\u00fc\u011f\u00fcm\u00fcne bir ok \u00e7izer.<\/li>\n<li><code>B -- Evet --> C<\/code>: B d\u00fc\u011f\u00fcm\u00fcnden C d\u00fc\u011f\u00fcm\u00fcne \"Evet\" etiketli bir ok \u00e7izer. Etiketli oklar, karar noktalar\u0131nda farkl\u0131 yollar\u0131 g\u00f6stermek i\u00e7in \u00e7ok kullan\u0131\u015fl\u0131d\u0131r.<\/li>\n<\/ul>\n<p>Bu basit sintaks ile, karma\u015f\u0131k i\u015f ak\u0131\u015flar\u0131n\u0131 dahi kolayca g\u00f6rselle\u015ftirebilirsiniz.<\/p>\n<h3>2. Bir UML Sekans Diyagram\u0131 (Sequence Diagram) Olu\u015fturma<\/h3>\n<p>Sekans diyagramlar\u0131, sistemdeki nesnelerin birbirleriyle zaman i\u00e7indeki etkile\u015fimlerini g\u00f6sterir. \u00d6zellikle bir \u00f6zelli\u011fin nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 veya bir i\u015flemin ad\u0131mlar\u0131n\u0131 a\u00e7\u0131klarken \u00e7ok faydal\u0131d\u0131rlar. MermaidXP ile sekans diyagram\u0131 olu\u015fturmak i\u00e7in <code>sequenceDiagram<\/code> anahtar kelimesini kullan\u0131r\u0131z.<\/p>\n<pre><code>\nsequenceDiagram\n    participant Kullan\u0131c\u0131\n    participant WebSunucusu as Web Sunucusu\n    participant Veritaban\u0131 as DB\n\n    Kullan\u0131c\u0131->>WebSunucusu: Sayfa Talep Et (URL)\n    activate WebSunucusu\n    WebSunucusu->>DB: Veri Sorgula\n    activate Veritaban\u0131\n    DB-->>WebSunucusu: Veriyi D\u00f6nd\u00fcr\n    deactivate Veritaban\u0131\n    WebSunucusu->>Kullan\u0131c\u0131: Sayfay\u0131 G\u00f6nder (HTML)\n    deactivate WebSunucusu\n<\/pre>\n<p><\/code><\/p>\n<p>Yukar\u0131daki kodda:<\/p>\n<ul>\n<li><code>sequenceDiagram<\/code>: Diyagram\u0131n bir sekans diyagram\u0131 oldu\u011funu belirtir.<\/li>\n<li><code>participant Kullan\u0131c\u0131<\/code>: Diyagramda \"Kullan\u0131c\u0131\" ad\u0131nda bir kat\u0131l\u0131mc\u0131 tan\u0131mlar.<\/li>\n<li><code>participant WebSunucusu as Web Sunucusu<\/code>: \"WebSunucusu\" ad\u0131nda bir kat\u0131l\u0131mc\u0131 tan\u0131mlar ve g\u00f6rselde \"Web Sunucusu\" olarak etiketlenmesini sa\u011flar.<\/li>\n<li><code>Kullan\u0131c\u0131->>WebSunucusu: Sayfa Talep Et (URL)<\/code>: Kullan\u0131c\u0131dan Web Sunucusuna senkron bir mesaj g\u00f6nderir. Ok \u015fekilleri farkl\u0131 mesaj t\u00fcrlerini (senkron, asenkron, geri d\u00f6n\u00fc\u015f) belirtir.<\/li>\n<li><code>activate WebSunucusu<\/code> ve <code>deactivate WebSunucusu<\/code>: Bir kat\u0131l\u0131mc\u0131n\u0131n aktif oldu\u011fu s\u00fcreyi (execution lifeline) g\u00f6sterir. Bu, i\u015flem s\u00fcresince nesnenin aktif oldu\u011funu g\u00f6rselle\u015ftirir.<\/li>\n<\/ul>\n<p>Bu diyagram, bir web uygulamas\u0131n\u0131n temel bir istek-cevap d\u00f6ng\u00fcs\u00fcn\u00fc \u00e7ok anla\u015f\u0131l\u0131r bir \u015fekilde g\u00f6rselle\u015ftirir.<\/p>\n<h3>3. Bir Gantt \u015eemas\u0131 Olu\u015fturma (Proje Y\u00f6netimi \u0130\u00e7in)<\/h3>\n<p>Gantt \u015femalar\u0131, proje g\u00f6revlerinin zaman \u00e7izelgesini g\u00f6stermek i\u00e7in kullan\u0131l\u0131r. G\u00f6revleri, ba\u015flang\u0131\u00e7 ve biti\u015f tarihlerini ve birbirlerine ba\u011f\u0131ml\u0131l\u0131klar\u0131n\u0131 belirterek proje planlamas\u0131nda kritik bir rol oynarlar. MermaidXP ile <code>gantt<\/code> anahtar kelimesini kullanarak Gantt \u015femalar\u0131 olu\u015fturabiliriz.<\/p>\n<pre><code>\ngantt\n    title Yeni Mobil Uygulama Geli\u015ftirme Projesi\n    dateFormat YYYY-MM-DD\n    section Planlama\n    Fizibilite \u00c7al\u0131\u015fmas\u0131        :done, des1, 2023-03-01, 2023-03-10\n    Gereksinim Analizi         :active, des2, 2023-03-11, 2023-03-25\n\n    section Tasar\u0131m\n    UI\/UX Tasar\u0131m\u0131             :des3, 2023-03-26, 2023-04-10\n    Veritaban\u0131 Tasar\u0131m\u0131        :des4, after des2, 5d\n\n    section Geli\u015ftirme\n    Frontend Geli\u015ftirme        :des5, 2023-04-11, 2023-05-15\n    Backend Geli\u015ftirme         :des6, 2023-04-11, 2023-05-20\n\n    section Test ve Da\u011f\u0131t\u0131m\n    Entegrasyon Testleri       :des7, after des5, after des6, 10d\n    Kullan\u0131c\u0131 Kabul Testi      :des8, 2023-05-26, 2023-06-05\n    Uygulama Da\u011f\u0131t\u0131m\u0131          :des9, 2023-06-06, 2023-06-10\n<\/pre>\n<p><\/code><\/p>\n<p>Yukar\u0131daki kodda:<\/p>\n<ul>\n<li><code>gantt<\/code>: Diyagram\u0131n bir Gantt \u015femas\u0131 oldu\u011funu belirtir.<\/li>\n<li><code>title<\/code>: Diyagram\u0131n ba\u015fl\u0131\u011f\u0131n\u0131 ayarlar.<\/li>\n<li><code>dateFormat YYYY-MM-DD<\/code>: Tarih format\u0131n\u0131 belirtir.<\/li>\n<li><code>section Planlama<\/code>: G\u00f6revleri gruplamak i\u00e7in bir b\u00f6l\u00fcm ba\u015fl\u0131\u011f\u0131 olu\u015fturur.<\/li>\n<li><code>Fizibilite \u00c7al\u0131\u015fmas\u0131 :done, des1, 2023-03-01, 2023-03-10<\/code>: Bir g\u00f6rev tan\u0131mlar.\n<ul>\n<li><code>Fizibilite \u00c7al\u0131\u015fmas\u0131<\/code>: G\u00f6rev ad\u0131.<\/li>\n<li><code>:done<\/code>: G\u00f6revin tamamland\u0131\u011f\u0131n\u0131 g\u00f6steren durum. Di\u011fer durumlar <code>active<\/code>, <code>crit<\/code> (kritik) veya bo\u015f (yap\u0131lacak) olabilir.<\/li>\n<li><code>des1<\/code>: G\u00f6rev i\u00e7in benzersiz bir ID (tan\u0131mlay\u0131c\u0131), ba\u011f\u0131ml\u0131l\u0131klar i\u00e7in kullan\u0131l\u0131r.<\/li>\n<li><code>2023-03-01, 2023-03-10<\/code>: G\u00f6revin ba\u015flang\u0131\u00e7 ve biti\u015f tarihleri.<\/li>\n<\/ul>\n<\/li>\n<li><code>Veritaban\u0131 Tasar\u0131m\u0131 :des4, after des2, 5d<\/code>: Bu g\u00f6rev, <code>des2<\/code> (Gereksinim Analizi) g\u00f6revinden <b>sonra<\/b> ba\u015flayacak ve 5 g\u00fcn s\u00fcrecek \u015fekilde ba\u011f\u0131ml\u0131l\u0131k tan\u0131mlar.<\/li>\n<\/ul>\n<p>Bu \u00f6rnekler, MermaidXP ile diyagram olu\u015fturman\u0131n ne kadar pratik oldu\u011funu g\u00f6stermektedir. Metin tabanl\u0131 yakla\u015f\u0131m sayesinde, diyagramlar\u0131n\u0131z h\u0131zla g\u00fcncellenebilir, kolayca kopyalanabilir ve projenizin dok\u00fcmantasyon s\u00fcrecini b\u00fcy\u00fck \u00f6l\u00e7\u00fcde h\u0131zland\u0131r\u0131r. Bu da projenin \u015feffafl\u0131\u011f\u0131n\u0131 ve ekip i\u00e7i ileti\u015fimi art\u0131rarak daha verimli bir \u00e7al\u0131\u015fma ortam\u0131 sa\u011flar.<\/p>\n<h2>MermaidXP Projenize Nas\u0131l Katk\u0131da Bulunabilirsiniz? A\u00e7\u0131k Kaynak Toplulu\u011funun G\u00fcc\u00fc<\/h2>\n<p>MermaidXP, a\u00e7\u0131k kaynak bir proje olman\u0131n getirdi\u011fi avantajlarla b\u00fcy\u00fcyen bir toplulu\u011fa sahiptir. <a href=\"https:\/\/github.com\/ccvass\/mermaidxp\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/github.com\/ccvass\/mermaidxp<\/a> adresindeki GitHub deposu, projenin kalbidir ve herkesin katk\u0131da bulunabilece\u011fi bir alan sunar. A\u00e7\u0131k kaynak projelere katk\u0131da bulunmak, sadece projenin geli\u015fimine destek olmakla kalmaz, ayn\u0131 zamanda kendi becerilerinizi geli\u015ftirmenize, yeni teknolojiler \u00f6\u011frenmenize ve geni\u015f bir geli\u015ftirici a\u011f\u0131yla etkile\u015fim kurman\u0131za olanak tan\u0131r.<\/p>\n<p>Peki, MermaidXP'ye nas\u0131l katk\u0131da bulunabilirsiniz? Katk\u0131 sa\u011flaman\u0131n sadece kod yazmaktan ibaret olmad\u0131\u011f\u0131n\u0131 unutmamak \u00f6nemlidir; bir\u00e7ok farkl\u0131 yolla de\u011ferli destek sa\u011flayabilirsiniz:<\/p>\n<h3>1. Hata Bildirme ve Geri Bildirim Sa\u011flama (Issues)<\/h3>\n<p>Projeyi kullan\u0131rken kar\u015f\u0131la\u015ft\u0131\u011f\u0131n\u0131z bir hata (bug), beklenmedik bir davran\u0131\u015f veya geli\u015ftirilebilecek bir alan fark ederseniz, GitHub deposunda bir \"Issue\" a\u00e7mak, katk\u0131da bulunman\u0131n en temel yollar\u0131ndan biridir. \u0130yi yaz\u0131lm\u0131\u015f bir hata raporu \u015funlar\u0131 i\u00e7ermelidir:<\/p>\n<ul>\n<li>Sorunu a\u00e7\u0131k\u00e7a anlatan bir ba\u015fl\u0131k.<\/li>\n<li>Sorunu yeniden \u00fcretmek i\u00e7in ad\u0131m ad\u0131m talimatlar.<\/li>\n<li>Beklenen davran\u0131\u015f ve g\u00f6zlemlenen davran\u0131\u015f.<\/li>\n<li>Varsa ekran g\u00f6r\u00fcnt\u00fcleri veya kod \u00f6rnekleri.<\/li>\n<\/ul>\n<p>Yeni \u00f6zellik \u00f6nerileri veya genel geri bildirimler de \"Issue\" olarak a\u00e7\u0131labilir. Bu geri bildirimler, projenin yol haritas\u0131n\u0131 \u015fekillendirmede ve kullan\u0131c\u0131 ihtiya\u00e7lar\u0131na daha iyi yan\u0131t vermede kritik \u00f6neme sahiptir.<\/p>\n<h3>2. Dok\u00fcmantasyon Geli\u015ftirme<\/h3>\n<p>Harika bir projenin harika bir dok\u00fcmantasyona ihtiyac\u0131 vard\u0131r. E\u011fer kod yazma konusunda kendinizi rahat hissetmiyorsan\u0131z bile, dok\u00fcmantasyonu geli\u015ftirmekle b\u00fcy\u00fck bir katk\u0131 sa\u011flayabilirsiniz. Mevcut belgelerdeki yaz\u0131m hatalar\u0131n\u0131 d\u00fczeltmek, \u00f6rnekleri daha anla\u015f\u0131l\u0131r hale getirmek, yeni ba\u015flayanlar i\u00e7in rehberler olu\u015fturmak veya \u00e7eviri yapmak gibi g\u00f6revler \u00fcstlenebilirsiniz. \u0130yi dok\u00fcmantasyon, yeni kullan\u0131c\u0131lar\u0131n projeyi benimsemesini ve mevcut kullan\u0131c\u0131lar\u0131n sorunsuz bir deneyim ya\u015famas\u0131n\u0131 sa\u011flar.<\/p>\n<h3>3. Kod Katk\u0131s\u0131 (Pull Request - PR)<\/h3>\n<p>E\u011fer geli\u015ftirme becerileriniz varsa, do\u011frudan koda katk\u0131da bulunabilirsiniz. Bu, yeni \u00f6zellikler eklemek, mevcut hatalar\u0131 d\u00fczeltmek veya performans\u0131 optimize etmek gibi \u00e7e\u015fitli \u015fekillerde olabilir. Tipik bir kod katk\u0131s\u0131 s\u00fcreci \u015f\u00f6yledir:<\/p>\n<ol>\n<li><strong>Depoyu Fork Etme:<\/strong> MermaidXP deposunu kendi GitHub hesab\u0131n\u0131za kopyalay\u0131n (fork).<\/li>\n<li><strong>Klonlama:<\/strong> Fork etti\u011finiz depoyu yerel bilgisayar\u0131n\u0131za klonlay\u0131n.<\/li>\n<li><strong>Dal Olu\u015fturma (Branch):<\/strong> Yapt\u0131\u011f\u0131n\u0131z de\u011fi\u015fiklikler i\u00e7in ana daldan (main\/master) ayr\u0131 bir dal olu\u015fturun (<code>git checkout -b ozellik-adi<\/code>).<\/li>\n<li><strong>De\u011fi\u015fiklikleri Yapma:<\/strong> Kodu de\u011fi\u015ftirin veya yeni kod ekleyin.<\/li>\n<li><strong>Taahh\u00fct Etme (Commit):<\/strong> De\u011fi\u015fikliklerinizi a\u00e7\u0131klay\u0131c\u0131 bir mesajla taahh\u00fct edin (<code>git commit -m \"Yeni \u00f6zellik: X\"<\/code>).<\/li>\n<li><strong>Y\u00fckleme (Push):<\/strong> De\u011fi\u015fikliklerinizi kendi fork'unuza y\u00fckleyin (<code>git push origin ozellik-adi<\/code>).<\/li>\n<li><strong>\u00c7ekme \u0130ste\u011fi A\u00e7ma (Pull Request - PR):<\/strong> GitHub \u00fczerinden MermaidXP deposuna bir \u00e7ekme iste\u011fi a\u00e7\u0131n.<\/li>\n<\/ol>\n<div class=\"expert-tip\">\n    Uzman \u0130pucu: \u0130yi bir Pull Request (PR) olu\u015fturmak, katk\u0131n\u0131z\u0131n kabul edilme \u015fans\u0131n\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131r\u0131r. PR a\u00e7\u0131klaman\u0131zda, neyi de\u011fi\u015ftirdi\u011finizi, neden de\u011fi\u015ftirdi\u011finizi ve de\u011fi\u015fikli\u011fin hangi sorunu \u00e7\u00f6zd\u00fc\u011f\u00fcn\u00fc veya hangi \u00f6zelli\u011fi ekledi\u011fini detayl\u0131ca belirtin. \u0130lgili Issue'lara referans verin, kodunuzu nas\u0131l test etti\u011finizi a\u00e7\u0131klay\u0131n ve e\u011fer gerekiyorsa ekran g\u00f6r\u00fcnt\u00fcleri ekleyin. Temiz, okunakl\u0131 ve projenin kodlama standartlar\u0131na uygun kod yazmaya \u00f6zen g\u00f6sterin.\n<\/div>\n<h3>4. Test Etme ve Geri Bildirim<\/h3>\n<p>Yeni \u00f6zellikler geli\u015ftirildi\u011finde veya hata d\u00fczeltmeleri yap\u0131ld\u0131\u011f\u0131nda, bunlar\u0131 test etmek ve geri bildirim sa\u011flamak da \u00e7ok de\u011ferli bir katk\u0131d\u0131r. Pre-release s\u00fcr\u00fcmleri deneyerek veya geli\u015ftirme dallar\u0131n\u0131 inceleyerek olas\u0131 sorunlar\u0131 erken a\u015famada tespit edebilir ve geli\u015ftiricilere yol g\u00f6sterebilirsiniz. Kullan\u0131c\u0131 deneyimini iyile\u015ftirmeye y\u00f6nelik \u00f6nerileriniz de bu kategoriye girer.<\/p>\n<p>MermaidXP toplulu\u011fu, her seviyeden katk\u0131y\u0131 memnuniyetle kar\u015f\u0131lar. \u0130ster tecr\u00fcbeli bir yaz\u0131l\u0131mc\u0131 olun, ister a\u00e7\u0131k kaynak d\u00fcnyas\u0131na yeni ad\u0131m atm\u0131\u015f olun, MermaidXP'ye katk\u0131da bulunarak hem projenin b\u00fcy\u00fcmesine yard\u0131mc\u0131 olabilir hem de kendi profesyonel geli\u015fiminize yat\u0131r\u0131m yapabilirsiniz. Unutmay\u0131n, her k\u00fc\u00e7\u00fck katk\u0131, b\u00fcy\u00fck bir fark yarat\u0131r ve projenin s\u00fcrd\u00fcr\u00fclebilirli\u011fine \u00f6nemli \u00f6l\u00e7\u00fcde destek olur.<\/p>\n<h2>MermaidXP'yi Mevcut Sistemlerinize Nas\u0131l Entegre Edersiniz? Geli\u015fmi\u015f Kullan\u0131m Senaryolar\u0131<\/h2>\n<p>MermaidXP'nin metin tabanl\u0131 diyagram olu\u015fturma yetene\u011fi, onu bir\u00e7ok farkl\u0131 sisteme ve i\u015f ak\u0131\u015f\u0131na kolayca entegre edilebilir bir ara\u00e7 haline getirir. Geli\u015ftiriciler, proje y\u00f6neticileri ve teknik yazarlar i\u00e7in bu entegrasyon yetene\u011fi, dok\u00fcmantasyon s\u00fcre\u00e7lerini otomatikle\u015ftirmek, i\u015fbirli\u011fini geli\u015ftirmek ve bilgi payla\u015f\u0131m\u0131n\u0131 kolayla\u015ft\u0131rmak a\u00e7\u0131s\u0131ndan kritik bir avantaj sa\u011flar. \u0130\u015fte MermaidXP'yi mevcut sistemlerinize entegre etmenin baz\u0131 geli\u015fmi\u015f yollar\u0131 ve vaka analizleri:<\/p>\n<h3>1. Markdown Destekli Edit\u00f6rler ve Ara\u00e7larla Entegrasyon<\/h3>\n<p>Mermaid'in ve dolay\u0131s\u0131yla MermaidXP'nin en yayg\u0131n kullan\u0131m alanlar\u0131ndan biri, Markdown tabanl\u0131 belgelerdir. Bir\u00e7ok modern metin d\u00fczenleyici ve geli\u015ftirme ortam\u0131, Mermaid sintaks\u0131n\u0131 do\u011frudan destekler veya eklentiler arac\u0131l\u0131\u011f\u0131yla bu deste\u011fi sunar:<\/p>\n<ul>\n<li><strong>Visual Studio Code:<\/strong> Pop\u00fcler VS Code i\u00e7in bir\u00e7ok eklenti (\u00f6rne\u011fin \"Markdown Preview Enhanced\"), Markdown belgeleri i\u00e7inde yaz\u0131lan Mermaid kodunu otomatik olarak canl\u0131 bir \u015fekilde render eder. Bu, geli\u015ftiricilerin kodlar\u0131yla birlikte diyagramlar\u0131n\u0131 da kolayca dok\u00fcmante etmelerini sa\u011flar.<\/li>\n<li><strong>Obsidian ve Di\u011fer Bilgi Y\u00f6netim Sistemleri:<\/strong> Bilgi y\u00f6netimi ve not alma ara\u00e7lar\u0131 (\u00f6rne\u011fin Obsidian, Notion gibi Markdown destekli platformlar), Mermaid entegrasyonu sayesinde kullan\u0131c\u0131lar\u0131n notlar\u0131na veya bilgi tabanlar\u0131na dinamik diyagramlar eklemesine olanak tan\u0131r. Bu sayede, karma\u015f\u0131k konular\u0131 g\u00f6rsel olarak a\u00e7\u0131klayabilir ve bilgiyi daha ak\u0131lda kal\u0131c\u0131 hale getirebilirsiniz.<\/li>\n<li><strong>GitHub\/GitLab Wiki ve Markdown Dosyalar\u0131:<\/strong> GitHub ve GitLab gibi platformlar, depolardaki Markdown dosyalar\u0131 i\u00e7inde (<code>README.md<\/code>, wiki sayfalar\u0131 vb.) Mermaid kodunu do\u011frudan i\u015fleyebilir. Bu, proje dok\u00fcmantasyonunuzu veya teknik spesifikasyonlar\u0131n\u0131z\u0131, kodunuzla ayn\u0131 depoda, g\u00f6rsel olarak zenginle\u015ftirilmi\u015f bir \u015fekilde tutman\u0131z\u0131 sa\u011flar.<\/li>\n<\/ul>\n<h3>2. Web Uygulamalar\u0131na ve Web Sitelerine Entegrasyon<\/h3>\n<p>MermaidXP, bir JavaScript k\u00fct\u00fcphanesi olarak web sayfalar\u0131na kolayca entegre edilebilir. Bu sayede, dinamik veya statik web sitelerinize etkile\u015fimli diyagramlar ekleyebilirsiniz. A\u015fa\u011f\u0131daki \u00f6rnek, temel bir entegrasyonu g\u00f6stermektedir:<\/p>\n<pre><code>\n<!DOCTYPE html>\n<html lang=\"tr\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>MermaidXP Web Entegrasyonu<\/title>\n    <!-- Mermaid k\u00fct\u00fcphanesini dahil edin -->\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/mermaid\/dist\/mermaid.min.js\"><\/script>\n    <style>\n        .mermaid {\n            background-color: #f9f9f9;\n            padding: 20px;\n            border-radius: 8px;\n            box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n            max-width: 100%;\n            height: auto;\n            display: block;\n            margin: 20px auto;\n        }\n    <\/style>\n<\/head>\n<body>\n    <h1>MermaidXP ile Web Sayfan\u0131zda Diyagramlar<\/h1>\n    <p>A\u015fa\u011f\u0131daki ak\u0131\u015f \u015femas\u0131, basit bir web uygulamas\u0131n\u0131n kullan\u0131c\u0131 ak\u0131\u015f\u0131n\u0131 g\u00f6stermektedir:<\/p>\n\n    <div class=\"mermaid\">\n        graph LR\n            A[Kullan\u0131c\u0131 Giri\u015fi] -- Do\u011fruland\u0131 --> B(Ana Sayfa)\n            A -- Hatal\u0131 --> C{Hata Ekran\u0131?}\n            C -- Evet --> A\n            C -- Hay\u0131r --> D[Deste\u011fe Y\u00f6nlendir]\n            B -- T\u0131kla --> E[Profil Sayfas\u0131]\n    <\/div>\n\n    <p>Bir di\u011fer \u00f6rnek, sistemdeki mod\u00fcller aras\u0131 etkile\u015fimi g\u00f6steren bir sekans diyagram\u0131:<\/p>\n\n    <div class=\"mermaid\">\n        sequenceDiagram\n            participant UI as Kullan\u0131c\u0131 Aray\u00fcz\u00fc\n            participant API as Uygulama API'si\n            participant DB as Veritaban\u0131\n\n            UI->>API: Veri Al (GET \/data)\n            activate API\n            API->>DB: Sorguyu \u00c7al\u0131\u015ft\u0131r\n            activate DB\n            DB-->>API: Sonu\u00e7lar\u0131 D\u00f6nd\u00fcr\n            deactivate DB\n            API-->>UI: Veri Yan\u0131t\u0131\n            deactivate API\n    <\/div>\n\n    <script>\n        \/\/ Mermaid'i ba\u015flat\n        mermaid.initialize({ startOnLoad: true });\n    <\/script>\n<\/body>\n<\/html>\n<\/pre>\n<p><\/code><\/p>\n<p>Bu kod blo\u011fu, <code><head><\/code> etiketinde Mermaid k\u00fct\u00fcphanesini dahil eder ve <code><body><\/code> i\u00e7inde <code>class=\"mermaid\"<\/code> etiketiyle i\u015faretlenmi\u015f <code>div<\/code> elemanlar\u0131 i\u00e7erisindeki metni otomatik olarak diyagrama d\u00f6n\u00fc\u015ft\u00fcr\u00fcr. <code>mermaid.initialize({ startOnLoad: true });<\/code> kodu, sayfa y\u00fcklendi\u011finde Mermaid'in t\u00fcm <code>div.mermaid<\/code> elemanlar\u0131n\u0131 bulup i\u015flemesini sa\u011flar.<\/p>\n<h3>3. Vaka Analizi: B\u00fcy\u00fck Bir Projede Otomatik Dok\u00fcmantasyon<\/h3>\n<p>B\u00fcy\u00fck ve h\u0131zla geli\u015fen bir yaz\u0131l\u0131m projesinde, manuel dok\u00fcmantasyon olu\u015fturmak zaman al\u0131c\u0131 ve g\u00fcncelli\u011fini yitirmeye mahkumdur. Bir yaz\u0131l\u0131m \u015firketi, proje s\u00fcre\u00e7lerinin ve sistem mimarilerinin dok\u00fcmantasyonunu otomatikle\u015ftirmek i\u00e7in MermaidXP'yi kullanmaya karar verdi. Her mod\u00fcl\u00fcn veya \u00f6zelli\u011fin geli\u015ftirilmesiyle birlikte, ilgili ak\u0131\u015f \u015femalar\u0131 ve sekans diyagramlar\u0131, proje deposundaki Markdown dosyalar\u0131na Mermaid sintaks\u0131yla eklendi. CI\/CD (S\u00fcrekli Entegrasyon\/S\u00fcrekli Da\u011f\u0131t\u0131m) boru hatt\u0131na entegre edilen bir otomasyon arac\u0131, bu Markdown dosyalar\u0131n\u0131 okuyarak ve Mermaid'i kullanarak diyagramlar\u0131 otomatik olarak SVG veya PNG format\u0131na d\u00f6n\u00fc\u015ft\u00fcrd\u00fc. Bu g\u00f6rseller, daha sonra \u015firketin i\u00e7 wiki'sine veya proje y\u00f6netimi panosuna (\u00f6rne\u011fin Confluence veya Jira) otomatik olarak y\u00fcklendi.<\/p>\n<p><strong>Sonu\u00e7lar:<\/strong><\/p>\n<ul>\n<li><strong>G\u00fcncel Dok\u00fcmantasyon:<\/strong> Diyagramlar, kodla birlikte versiyon kontrol alt\u0131nda oldu\u011fu i\u00e7in, kod de\u011fi\u015fiklikleriyle e\u015f zamanl\u0131 olarak g\u00fcncellenebildi. Bu, dok\u00fcmantasyonun her zaman g\u00fcncel kalmas\u0131n\u0131 sa\u011flad\u0131.<\/li>\n<li><strong>Zaman Tasarrufu:<\/strong> Geli\u015ftiricilerin manuel diyagram \u00e7izmekle harcayacaklar\u0131 zaman, kod yazmaya veya daha karma\u015f\u0131k sorunlar\u0131 \u00e7\u00f6zmeye ayr\u0131ld\u0131.<\/li>\n<li><strong>Geli\u015fmi\u015f \u0130\u015fbirli\u011fi:<\/strong> Ekip \u00fcyeleri, diyagramlar\u0131 kod incelemesi gibi kolayca inceleyebilir ve yorumlayabilirdi. Yeni ekip \u00fcyeleri de projenin mimarisini ve i\u015f ak\u0131\u015flar\u0131n\u0131 h\u0131zl\u0131ca anlayabildi.<\/li>\n<li><strong>Daha Az Hata:<\/strong> Otomatikle\u015ftirilmi\u015f s\u00fcre\u00e7, insan hatas\u0131ndan kaynaklanan tutars\u0131zl\u0131klar\u0131 veya eksiklikleri minimize etti.<\/li>\n<\/ul>\n<p>Bu vaka analizi, MermaidXP'nin sadece basit diyagramlar \u00e7izmekten \u00f6te, karma\u015f\u0131k kurumsal ortamlarda bile g\u00fc\u00e7l\u00fc bir otomatik dok\u00fcmantasyon ve i\u015fbirli\u011fi arac\u0131 olarak kullan\u0131labilece\u011fini g\u00f6stermektedir. Geli\u015fmi\u015f entegrasyon yetenekleri sayesinde, MermaidXP modern yaz\u0131l\u0131m geli\u015ftirme s\u00fcre\u00e7lerinin ayr\u0131lmaz bir par\u00e7as\u0131 haline gelebilir.<\/p>\n<h3>Mobil Uyumlu Diyagramlar \u0130\u00e7in MermaidXP ve Responsive Tasar\u0131m<\/h3>\n<p>G\u00fcn\u00fcm\u00fcz d\u00fcnyas\u0131nda i\u00e7eri\u011fin mobil cihazlarda da sorunsuz bir \u015fekilde g\u00f6r\u00fcnt\u00fclenmesi b\u00fcy\u00fck \u00f6nem ta\u015f\u0131maktad\u0131r. MermaidXP ile olu\u015fturulan diyagramlar, temel olarak SVG (Scalable Vector Graphics) format\u0131nda render edildi\u011fi i\u00e7in, do\u011fal olarak \u00f6l\u00e7eklenebilir ve kalitelerini kaybetmeden farkl\u0131 ekran boyutlar\u0131na uyum sa\u011flayabilirler. Ancak, diyagramlar\u0131n daha k\u00fc\u00e7\u00fck ekranlarda daha okunabilir olmas\u0131 i\u00e7in baz\u0131 CSS optimizasyonlar\u0131 yapmak faydal\u0131 olabilir.<\/p>\n<p>A\u015fa\u011f\u0131daki HTML ve CSS \u00f6rne\u011fi, MermaidXP diyagramlar\u0131n\u0131 mobil cihazlarda daha iyi g\u00f6r\u00fcnt\u00fclemek i\u00e7in basit responsive tasar\u0131m tekniklerini nas\u0131l uygulayabilece\u011finizi g\u00f6stermektedir:<\/p>\n<pre><code>\n<style>\n    \/* Mermaid konteyneri i\u00e7in genel stil *\/\n    .mermaid {\n        max-width: 100%; \/* Konteynerin geni\u015fli\u011fini maksimuma ayarla *\/\n        height: auto;    \/* Y\u00fcksekli\u011fi otomatik olarak ayarla, oran\u0131n\u0131 koru *\/\n        display: block;  \/* Blok seviyesinde g\u00f6ster *\/\n        margin: 20px auto; \/* Ortala ve kenar bo\u015flu\u011fu ekle *\/\n        border: 1px solid #ddd; \/* Hafif bir \u00e7er\u00e7eve *\/\n        padding: 10px; \/* \u0130\u00e7 bo\u015fluk *\/\n        box-sizing: border-box; \/* Padding ve border geni\u015fli\u011fe dahil *\/\n        overflow-x: auto; \/* Yatay kayd\u0131rma \u00e7ubu\u011fu k\u00fc\u00e7\u00fck ekranlarda g\u00f6r\u00fcn\u00fcr *\/\n    }\n\n    \/* Mobil cihazlar i\u00e7in \u00f6zel stiller *\/\n    @media (max-width: 768px) {\n        .mermaid {\n            font-size: 0.8em; \/* K\u00fc\u00e7\u00fck ekranlarda diyagram metinlerinin boyutunu k\u00fc\u00e7\u00fclt *\/\n            stroke-width: 1px; \/* \u00c7izgi kal\u0131nl\u0131\u011f\u0131n\u0131 azalt *\/\n            padding: 5px; \/* \u0130\u00e7 bo\u015flu\u011fu azalt *\/\n        }\n        \/* Diyagram i\u00e7indeki \u00f6zel elementler i\u00e7in font boyutunu ayarlayabilirsiniz *\/\n        .mermaid-node text {\n            font-size: 0.9em;\n        }\n    }\n\n    @media (max-width: 480px) {\n        .mermaid {\n            font-size: 0.7em; \/* \u00c7ok k\u00fc\u00e7\u00fck ekranlarda daha da k\u00fc\u00e7\u00fclt *\/\n        }\n        .mermaid-node text {\n            font-size: 0.8em;\n        }\n    }\n<\/style>\n\n<!-- Bu div i\u00e7erisindeki Mermaid kodu, yukar\u0131daki stiller ile i\u015flenecektir -->\n<div class=\"mermaid\">\n    graph TD\n        A[Mobil Uyumlu Diyagram] --> B{Farkl\u0131 Ekran Boyutlar\u0131}\n        B -- SVG ile --> C(M\u00fckemmel \u00d6l\u00e7eklenebilirlik)\n        B -- CSS ile --> D(Optimize Edilmi\u015f Okunabilirlik)\n        C & D --> E[Harika Kullan\u0131c\u0131 Deneyimi]\n<\/div>\n<\/pre>\n<p><\/code><\/p>\n<p>Bu \u00f6rnekte:<\/p>\n<ul>\n<li><code>.mermaid<\/code> s\u0131n\u0131f\u0131na uygulanan genel stiller, diyagram konteynerinin sayfa geni\u015fli\u011fine uyum sa\u011flamas\u0131n\u0131 ve resim oran\u0131n\u0131 korumas\u0131n\u0131 garanti eder. <code>overflow-x: auto;<\/code> \u00f6zelli\u011fi, diyagram \u00e7ok geni\u015f oldu\u011funda yatay bir kayd\u0131rma \u00e7ubu\u011fu ekleyerek i\u00e7eri\u011fin kayd\u0131r\u0131labilir olmas\u0131n\u0131 sa\u011flar.<\/li>\n<li><code>@media (max-width: 768px)<\/code> ve <code>@media (max-width: 480px)<\/code> kurallar\u0131, belirli ekran boyutlar\u0131n\u0131n alt\u0131na d\u00fc\u015f\u00fcld\u00fc\u011f\u00fcnde devreye girer. Bu kurallar sayesinde, diyagram i\u00e7indeki metinlerin ve \u00e7izgilerin boyutu otomatik olarak k\u00fc\u00e7\u00fclt\u00fclerek daha k\u00fc\u00e7\u00fck ekranlarda daha fazla i\u00e7eri\u011fin g\u00f6r\u00fcn\u00fcr olmas\u0131 ve okunabilirli\u011fin art\u0131r\u0131lmas\u0131 sa\u011flan\u0131r.<\/li>\n<\/ul>\n<p>MermaidXP'nin SVG \u00e7\u0131kt\u0131s\u0131yla sa\u011flad\u0131\u011f\u0131 bu temel responsive yetenekler ve basit CSS dokunu\u015flar\u0131yla, diyagramlar\u0131n\u0131z\u0131n farkl\u0131 cihazlarda her zaman profesyonel ve eri\u015filebilir g\u00f6r\u00fcnmesini sa\u011flayabilirsiniz. Bu da kullan\u0131c\u0131 deneyimini \u00f6nemli \u00f6l\u00e7\u00fcde iyile\u015ftirir ve bilginin her platformda kolayca anla\u015f\u0131lmas\u0131na yard\u0131mc\u0131 olur.<\/p>\n<h2>Sonu\u00e7: MermaidXP ile G\u00f6rselle\u015ftirmenin Gelece\u011fi ve S\u0131k\u00e7a Sorulan Sorular<\/h2>\n<p>MermaidXP, karma\u015f\u0131k fikirleri ve s\u00fcre\u00e7leri g\u00f6rselle\u015ftirmenin hem g\u00fc\u00e7l\u00fc hem de eri\u015filebilir bir yolunu sunarak modern dok\u00fcmantasyon ve i\u015fbirli\u011fi paradigmalar\u0131na yeni bir soluk getiriyor. Metin tabanl\u0131 yakla\u015f\u0131m\u0131 sayesinde diyagram olu\u015fturmay\u0131 kodlama prati\u011fiyle entegre eden bu proje, geli\u015ftiricilere ve proje y\u00f6neticilerine, projelerini daha \u015feffaf, daha anla\u015f\u0131l\u0131r ve daha s\u00fcrd\u00fcr\u00fclebilir hale getirme imkan\u0131 sunuyor.<\/p>\n<p>A\u00e7\u0131k kaynak ruhuyla in\u015fa edilen MermaidXP, sadece mevcut \u00f6zellikleriyle de\u011fil, ayn\u0131 zamanda toplulu\u011fun aktif kat\u0131l\u0131m\u0131yla s\u00fcrekli olarak geli\u015fme potansiyeline sahiptir. Hata bildirimi, dok\u00fcmantasyon iyile\u015ftirmeleri, yeni \u00f6zellik \u00f6nerileri veya do\u011frudan kod katk\u0131lar\u0131 yoluyla herkes, projenin gelece\u011fini \u015fekillendirmeye yard\u0131mc\u0131 olabilir. Bu, MermaidXP'yi sadece bir ara\u00e7 olmaktan \u00e7\u0131kar\u0131p, dinamik bir ekosisteme d\u00f6n\u00fc\u015ft\u00fcr\u00fcyor.<\/p>\n<p>G\u00f6rselle\u015ftirmenin \u00f6nemi her ge\u00e7en g\u00fcn artarken, MermaidXP gibi ara\u00e7lar, bilginin h\u0131zl\u0131 ve etkili bir \u015fekilde payla\u015f\u0131lmas\u0131n\u0131 kolayla\u015ft\u0131r\u0131r. \u0130ster h\u0131zl\u0131 bir ak\u0131\u015f \u015femas\u0131 \u00e7izmek, ister karma\u015f\u0131k bir sistemin mimarisini belgelemek veya bir projenin zaman \u00e7izelgesini takip etmek isteyin, MermaidXP size g\u00fcvenilir ve esnek bir \u00e7\u00f6z\u00fcm sunar. Bu yenilik\u00e7i platformu deneyimlemek ve geli\u015fimine katk\u0131da bulunmak i\u00e7in <a href=\"https:\/\/mxp.apulab.com\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/mxp.apulab.com<\/a> adresini ziyaret edin ve <a href=\"https:\/\/github.com\/ccvass\/mermaidxp\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/github.com\/ccvass\/mermaidxp<\/a> deposuna g\u00f6z at\u0131n. G\u00f6rselle\u015ftirme yolculu\u011funuzda MermaidXP'nin sundu\u011fu kolayl\u0131\u011f\u0131 ve g\u00fcc\u00fc ke\u015ffedin!<\/p>\n<h3>S\u0131k\u00e7a Sorulan Sorular (SSS)<\/h3>\n<p><strong>1. MermaidXP \u00fccretsiz mi ve a\u00e7\u0131k kaynak m\u0131?<\/strong><\/p>\n<p>Evet, MermaidXP tamamen a\u00e7\u0131k kaynak bir projedir ve kullan\u0131m\u0131 tamamen \u00fccretsizdir. GitHub deposunda herkese a\u00e7\u0131kt\u0131r ve MIT lisans\u0131 alt\u0131nda da\u011f\u0131t\u0131lmaktad\u0131r.<\/p>\n<p><strong>2. MermaidXP ile hangi diyagram t\u00fcrlerini olu\u015fturabilirim?<\/strong><\/p>\n<p>MermaidXP, orijinal Mermaid projesinin destekledi\u011fi t\u00fcm pop\u00fcler diyagram t\u00fcrlerini (ak\u0131\u015f \u015femalar\u0131, sekans diyagramlar\u0131, Gantt \u015femalar\u0131, s\u0131n\u0131f diyagramlar\u0131, durum diyagramlar\u0131, ER diyagramlar\u0131, kullan\u0131c\u0131 yolculu\u011fu haritalar\u0131 ve daha fazlas\u0131) destekler. Gelecekte ek diyagram t\u00fcrlerinin deste\u011fi de topluluk katk\u0131lar\u0131yla sa\u011flanabilir.<\/p>\n<p><strong>3. Olu\u015fturdu\u011fum diyagramlar\u0131 d\u0131\u015fa aktarabilir miyim?<\/strong><\/p>\n<p>Evet, genellikle MermaidXP ile olu\u015fturulan diyagramlar, SVG (Scalable Vector Graphics) format\u0131nda d\u0131\u015fa aktar\u0131labilir. Bu, diyagramlar\u0131n\u0131z\u0131n kalitesini kaybetmeden farkl\u0131 platformlarda kullan\u0131labilmesini sa\u011flar. Baz\u0131 entegrasyonlar veya ara\u00e7lar PNG gibi di\u011fer formatlarda da d\u0131\u015fa aktar\u0131m se\u00e7enekleri sunabilir.<\/p>\n<p><strong>4. MermaidXP projesine katk\u0131da bulunmak i\u00e7in hangi becerilere ihtiyac\u0131m var?<\/strong><\/p>\n<p>Katk\u0131da bulunmak i\u00e7in kodlama bilgisi \u015fart de\u011fildir! Hata bildirimi, dok\u00fcmantasyon geli\u015ftirme, \u00e7eviri veya yeni \u00f6zellik \u00f6nerileri gibi yollarla da katk\u0131 sa\u011flayabilirsiniz. E\u011fer kod yazmak istiyorsan\u0131z, temel Git bilgisi ve JavaScript\/TypeScript tecr\u00fcbesi faydal\u0131 olacakt\u0131r.<\/p>\n<p><strong>5. Mermaid ile MermaidXP aras\u0131ndaki temel fark nedir?<\/strong><\/p>\n<p>MermaidXP, pop\u00fcler Mermaid k\u00fct\u00fcphanesinin \u00fczerine in\u015fa edilmi\u015f bir projedir. Temel Mermaid sintaks\u0131n\u0131 ve \u00f6zelliklerini korurken, topluluk odakl\u0131 bir yakla\u015f\u0131mla daha geli\u015fmi\u015f \u00f6zellikler, daha iyi kullan\u0131c\u0131 deneyimi iyile\u015ftirmeleri ve potansiyel olarak daha interaktif g\u00f6rselle\u015ftirmeler sunmay\u0131 hedefler. MermaidXP, Mermaid'in g\u00fc\u00e7l\u00fc temellerini al\u0131p onu bir ad\u0131m \u00f6teye ta\u015f\u0131may\u0131 ama\u00e7layan bir evrimdir.<\/p>\n","protected":false},"excerpt":{"rendered":"Karma\u015f\u0131k fikirleri ve s\u00fcre\u00e7leri g\u00f6rselle\u015ftirmek, modern yaz\u0131l\u0131m geli\u015ftirme ve proje y\u00f6netiminde vazge\u00e7ilmez bir unsurdur. MermaidXP, a\u00e7\u0131k kaynak toplulu\u011funun&hellip;","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":[1342],"tags":[],"class_list":{"0":"post-31206","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-ai","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>MermaidXP: Diyagram Olu\u015fturmada Yeni Boyutlar ve Katk\u0131 Rehberi<\/title>\n<meta name=\"description\" content=\"Karma\u015f\u0131k fikirleri ve s\u00fcre\u00e7leri g\u00f6rselle\u015ftirmek, modern yaz\u0131l\u0131m geli\u015ftirme ve proje y\u00f6netiminde vazge\u00e7ilmez bir unsurdur. MermaidXP, a\u00e7\u0131k kaynak toplulu\u011funun g\u00fcc\u00fcyle metin tabanl\u0131 diyagramlar olu\u015fturmay\u0131 bir \u00fcst seviyeye ta\u015f\u0131yor. Bu rehberde MermaidXP&#039;nin ne oldu\u011funu, nas\u0131l kullan\u0131ld\u0131\u011f\u0131n\u0131 ve projesine nas\u0131l katk\u0131da bulunabilece\u011finizi ke\u015ffedeceksiniz. Hemen deneyin: https:\/\/mxp.apulab.com veya katk\u0131da bulunmak i\u00e7in repoyu ziyaret edin: https:\/\/github.com\/ccvass\/mermaidxp.\" \/>\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\/mermaidxp-diyagram-olusturmada-yeni-boyutlar-ve-katki-rehberi\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"MermaidXP: Diyagram Olu\u015fturmada Yeni Boyutlar ve Katk\u0131 Rehberi\" \/>\n<meta property=\"og:description\" content=\"Karma\u015f\u0131k fikirleri ve s\u00fcre\u00e7leri g\u00f6rselle\u015ftirmek, modern yaz\u0131l\u0131m geli\u015ftirme ve proje y\u00f6netiminde vazge\u00e7ilmez bir unsurdur. MermaidXP, a\u00e7\u0131k kaynak toplulu\u011funun g\u00fcc\u00fcyle metin tabanl\u0131 diyagramlar olu\u015fturmay\u0131 bir \u00fcst seviyeye ta\u015f\u0131yor. Bu rehberde MermaidXP&#039;nin ne oldu\u011funu, nas\u0131l kullan\u0131ld\u0131\u011f\u0131n\u0131 ve projesine nas\u0131l katk\u0131da bulunabilece\u011finizi ke\u015ffedeceksiniz. Hemen deneyin: https:\/\/mxp.apulab.com veya katk\u0131da bulunmak i\u00e7in repoyu ziyaret edin: https:\/\/github.com\/ccvass\/mermaidxp.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/mermaidxp-diyagram-olusturmada-yeni-boyutlar-ve-katki-rehberi\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-10-07T03:31:21+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=\"22 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/mermaidxp-diyagram-olusturmada-yeni-boyutlar-ve-katki-rehberi\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/mermaidxp-diyagram-olusturmada-yeni-boyutlar-ve-katki-rehberi\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"MermaidXP: Diyagram Olu\u015fturmada Yeni Boyutlar ve Katk\u0131 Rehberi\",\"datePublished\":\"2025-10-07T03:31:21+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/mermaidxp-diyagram-olusturmada-yeni-boyutlar-ve-katki-rehberi\/\"},\"wordCount\":4018,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"articleSection\":[\"AI\"],\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/mermaidxp-diyagram-olusturmada-yeni-boyutlar-ve-katki-rehberi\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/mermaidxp-diyagram-olusturmada-yeni-boyutlar-ve-katki-rehberi\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/mermaidxp-diyagram-olusturmada-yeni-boyutlar-ve-katki-rehberi\/\",\"name\":\"MermaidXP: Diyagram Olu\u015fturmada Yeni Boyutlar ve Katk\u0131 Rehberi\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-10-07T03:31:21+00:00\",\"description\":\"Karma\u015f\u0131k fikirleri ve s\u00fcre\u00e7leri g\u00f6rselle\u015ftirmek, modern yaz\u0131l\u0131m geli\u015ftirme ve proje y\u00f6netiminde vazge\u00e7ilmez bir unsurdur. MermaidXP, a\u00e7\u0131k kaynak toplulu\u011funun g\u00fcc\u00fcyle metin tabanl\u0131 diyagramlar olu\u015fturmay\u0131 bir \u00fcst seviyeye ta\u015f\u0131yor. Bu rehberde MermaidXP'nin ne oldu\u011funu, nas\u0131l kullan\u0131ld\u0131\u011f\u0131n\u0131 ve projesine nas\u0131l katk\u0131da bulunabilece\u011finizi ke\u015ffedeceksiniz. Hemen deneyin: https:\/\/mxp.apulab.com veya katk\u0131da bulunmak i\u00e7in repoyu ziyaret edin: https:\/\/github.com\/ccvass\/mermaidxp.\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/mermaidxp-diyagram-olusturmada-yeni-boyutlar-ve-katki-rehberi\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/mermaidxp-diyagram-olusturmada-yeni-boyutlar-ve-katki-rehberi\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/mermaidxp-diyagram-olusturmada-yeni-boyutlar-ve-katki-rehberi\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"MermaidXP: Diyagram Olu\u015fturmada Yeni Boyutlar ve Katk\u0131 Rehberi\"}]},{\"@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":"MermaidXP: Diyagram Olu\u015fturmada Yeni Boyutlar ve Katk\u0131 Rehberi","description":"Karma\u015f\u0131k fikirleri ve s\u00fcre\u00e7leri g\u00f6rselle\u015ftirmek, modern yaz\u0131l\u0131m geli\u015ftirme ve proje y\u00f6netiminde vazge\u00e7ilmez bir unsurdur. MermaidXP, a\u00e7\u0131k kaynak toplulu\u011funun g\u00fcc\u00fcyle metin tabanl\u0131 diyagramlar olu\u015fturmay\u0131 bir \u00fcst seviyeye ta\u015f\u0131yor. Bu rehberde MermaidXP'nin ne oldu\u011funu, nas\u0131l kullan\u0131ld\u0131\u011f\u0131n\u0131 ve projesine nas\u0131l katk\u0131da bulunabilece\u011finizi ke\u015ffedeceksiniz. Hemen deneyin: https:\/\/mxp.apulab.com veya katk\u0131da bulunmak i\u00e7in repoyu ziyaret edin: https:\/\/github.com\/ccvass\/mermaidxp.","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\/mermaidxp-diyagram-olusturmada-yeni-boyutlar-ve-katki-rehberi\/","og_locale":"tr_TR","og_type":"article","og_title":"MermaidXP: Diyagram Olu\u015fturmada Yeni Boyutlar ve Katk\u0131 Rehberi","og_description":"Karma\u015f\u0131k fikirleri ve s\u00fcre\u00e7leri g\u00f6rselle\u015ftirmek, modern yaz\u0131l\u0131m geli\u015ftirme ve proje y\u00f6netiminde vazge\u00e7ilmez bir unsurdur. MermaidXP, a\u00e7\u0131k kaynak toplulu\u011funun g\u00fcc\u00fcyle metin tabanl\u0131 diyagramlar olu\u015fturmay\u0131 bir \u00fcst seviyeye ta\u015f\u0131yor. Bu rehberde MermaidXP'nin ne oldu\u011funu, nas\u0131l kullan\u0131ld\u0131\u011f\u0131n\u0131 ve projesine nas\u0131l katk\u0131da bulunabilece\u011finizi ke\u015ffedeceksiniz. Hemen deneyin: https:\/\/mxp.apulab.com veya katk\u0131da bulunmak i\u00e7in repoyu ziyaret edin: https:\/\/github.com\/ccvass\/mermaidxp.","og_url":"https:\/\/fatihsoysal.com\/blog\/mermaidxp-diyagram-olusturmada-yeni-boyutlar-ve-katki-rehberi\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-10-07T03:31:21+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"22 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/mermaidxp-diyagram-olusturmada-yeni-boyutlar-ve-katki-rehberi\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/mermaidxp-diyagram-olusturmada-yeni-boyutlar-ve-katki-rehberi\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"MermaidXP: Diyagram Olu\u015fturmada Yeni Boyutlar ve Katk\u0131 Rehberi","datePublished":"2025-10-07T03:31:21+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/mermaidxp-diyagram-olusturmada-yeni-boyutlar-ve-katki-rehberi\/"},"wordCount":4018,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"articleSection":["AI"],"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/mermaidxp-diyagram-olusturmada-yeni-boyutlar-ve-katki-rehberi\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/mermaidxp-diyagram-olusturmada-yeni-boyutlar-ve-katki-rehberi\/","url":"https:\/\/fatihsoysal.com\/blog\/mermaidxp-diyagram-olusturmada-yeni-boyutlar-ve-katki-rehberi\/","name":"MermaidXP: Diyagram Olu\u015fturmada Yeni Boyutlar ve Katk\u0131 Rehberi","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-10-07T03:31:21+00:00","description":"Karma\u015f\u0131k fikirleri ve s\u00fcre\u00e7leri g\u00f6rselle\u015ftirmek, modern yaz\u0131l\u0131m geli\u015ftirme ve proje y\u00f6netiminde vazge\u00e7ilmez bir unsurdur. MermaidXP, a\u00e7\u0131k kaynak toplulu\u011funun g\u00fcc\u00fcyle metin tabanl\u0131 diyagramlar olu\u015fturmay\u0131 bir \u00fcst seviyeye ta\u015f\u0131yor. Bu rehberde MermaidXP'nin ne oldu\u011funu, nas\u0131l kullan\u0131ld\u0131\u011f\u0131n\u0131 ve projesine nas\u0131l katk\u0131da bulunabilece\u011finizi ke\u015ffedeceksiniz. Hemen deneyin: https:\/\/mxp.apulab.com veya katk\u0131da bulunmak i\u00e7in repoyu ziyaret edin: https:\/\/github.com\/ccvass\/mermaidxp.","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/mermaidxp-diyagram-olusturmada-yeni-boyutlar-ve-katki-rehberi\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/mermaidxp-diyagram-olusturmada-yeni-boyutlar-ve-katki-rehberi\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/mermaidxp-diyagram-olusturmada-yeni-boyutlar-ve-katki-rehberi\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"MermaidXP: Diyagram Olu\u015fturmada Yeni Boyutlar ve Katk\u0131 Rehberi"}]},{"@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\/31206","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=31206"}],"version-history":[{"count":0,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/31206\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=31206"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=31206"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=31206"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}