{"id":18665,"date":"2025-04-20T06:45:13","date_gmt":"2025-04-20T03:45:13","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/mermaid-js-ile-diyagramlar-olusturma-hizli-baslangic-kilavuzu\/"},"modified":"2025-04-20T06:45:13","modified_gmt":"2025-04-20T03:45:13","slug":"mermaid-js-ile-diyagramlar-olusturma-hizli-baslangic-kilavuzu","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/mermaid-js-ile-diyagramlar-olusturma-hizli-baslangic-kilavuzu\/","title":{"rendered":"Mermaid.js ile Diyagramlar Olu\u015fturma: H\u0131zl\u0131 Ba\u015flang\u0131\u00e7 K\u0131lavuzu"},"content":{"rendered":"<p>Mermaid.js ile Diyagramlar Olu\u015fturma: H\u0131zl\u0131 Ba\u015flang\u0131\u00e7 K\u0131lavuzu<\/p>\n<p>Son zamanlarda Mermaid.js ile olduk\u00e7a fazla vakit ge\u00e7iriyorum ve t\u00fcm temel ihtiya\u00e7lar\u0131 kapsayan bir hile sayfas\u0131 olu\u015fturdum.  Bu sayede d\u00fcz metni, Markdown dosyan\u0131z\u0131n i\u00e7inde do\u011frudan diyagrama d\u00f6n\u00fc\u015ft\u00fcrebilirsiniz.  Bu, fikirlerinizi g\u00f6rselle\u015ftirmeyi inan\u0131lmaz derecede kolayla\u015ft\u0131r\u0131yor.  Asl\u0131nda,  <a href=\"https:\/\/fatihsoysal.com\">kendi web sitemde<\/a>  de bu tekni\u011fi s\u0131kl\u0131kla kullan\u0131yorum.  Mermaid.js&#8217;in sundu\u011fu esneklik ve kolayl\u0131k, teknik dok\u00fcmanlar\u0131m\u0131 ve a\u00e7\u0131klamalar\u0131m\u0131 \u00e7ok daha anla\u015f\u0131l\u0131r hale getiriyor. <\/p>\n<h2>Mermaid.js Nedir ve Neden Kullanmal\u0131s\u0131n\u0131z?<\/h2>\n<p>Mermaid.js, JavaScript tabanl\u0131 bir diyagram olu\u015fturma k\u00fct\u00fcphanesidir.  Basit bir Markdown benzeri dil kullanarak \u00e7e\u015fitli diyagram t\u00fcrleri olu\u015fturabilirsiniz.  Bu, teknik dok\u00fcmanlar, blog yaz\u0131lar\u0131 veya sunumlar i\u00e7in g\u00f6rsel olarak zengin ve anla\u015f\u0131l\u0131r i\u00e7erikler olu\u015fturman\u0131za olanak tan\u0131r.  Diyagramlar\u0131n\u0131z\u0131 do\u011frudan Markdown dosyan\u0131z\u0131n i\u00e7inde tan\u0131mlayabilirsiniz; bu da d\u00fczenleme ve bak\u0131m s\u00fcrecini olduk\u00e7a kolayla\u015ft\u0131r\u0131r. Ayr\u0131ca,  <a href=\"https:\/\/dev.to\/nagasuresh_dondapati_d5df\/been-playing-around-with-mermaidjs-lately-and-i-put-together-a-cheat-sheet-that-covers-all-the-22a8\">burada<\/a>  payla\u015f\u0131lan  cheat sheet ile ba\u015flang\u0131\u00e7 a\u015famas\u0131n\u0131 kolayca atlatabilirsiniz. \u00d6rne\u011fin, ak\u0131\u015f \u015femalar\u0131, Gantt \u015femalar\u0131, s\u0131n\u0131f diyagramlar\u0131 ve daha bir\u00e7ok diyagram t\u00fcr\u00fc kolayca olu\u015fturulabilir.<\/p>\n<h2>Hile Sayfas\u0131: Temel Mermaid.js Komutlar\u0131<\/h2>\n<p>A\u015fa\u011f\u0131da, s\u0131k kullan\u0131lan Mermaid.js komutlar\u0131ndan baz\u0131 \u00f6rnekler bulunmaktad\u0131r.  Bu \u00f6rnekler size h\u0131zl\u0131 bir ba\u015flang\u0131\u00e7 sa\u011flayacak ve daha karma\u015f\u0131k diyagramlar olu\u015fturmak i\u00e7in temel bir anlay\u0131\u015f kazand\u0131racakt\u0131r.<\/p>\n<h3>Ak\u0131\u015f \u015eemas\u0131<\/h3>\n<pre><code class=\"language-mermaid\">\ngraph TD\n    A[Ba\u015flang\u0131\u00e7] --> B{Ko\u015ful?};\n    B -- Evet --> C[\u0130\u015flem 1];\n    B -- Hay\u0131r --> D[\u0130\u015flem 2];\n    C --> E[Sonu\u00e7];\n    D --> E;\n<\/code><\/pre>\n<h3>Gantt \u015eemas\u0131<\/h3>\n<pre><code class=\"language-mermaid\">\ngantt\n    dateFormat  YYYY-MM-DD\n    title Adding GANTT diagram functionality to mermaid\n    excludes weekends\n    section Section\n    A task           :a1, 2014-01-06, 3d\n    Another task     :after a1  , 20d\n    section Another section\n    Task in secion2  :2014-01-12, 3d\n<\/code><\/pre>\n<h3>S\u0131n\u0131f Diyagram\u0131<\/h3>\n<pre><code class=\"language-mermaid\">\nclassDiagram\n    class Person {\n        -name : String\n        -age : int\n    }\n    class Employee {\n        -salary : double\n    }\n    Person <|--- Employee\n<\/code><\/pre>\n<h2>Mermaid.js'i Projelerinizde Kullanman\u0131n Avantajlar\u0131<\/h2>\n<p>Mermaid.js kullanman\u0131n pek \u00e7ok avantaj\u0131 vard\u0131r.  Bunlardan baz\u0131lar\u0131 \u015funlard\u0131r:  \u00d6ncelikle,  kodunuzun okunabilirli\u011fini ve anla\u015f\u0131l\u0131rl\u0131\u011f\u0131n\u0131 art\u0131r\u0131r.  Karma\u015f\u0131k verileri g\u00f6rsel olarak temsil ederek,  projeniz hakk\u0131nda daha net bir anlay\u0131\u015f sa\u011flar.  Ayr\u0131ca,  diagramlar\u0131n\u0131z\u0131 do\u011frudan Markdown dosyalar\u0131n\u0131za ekleyerek,  i\u015f ak\u0131\u015f\u0131n\u0131z\u0131 optimize eder ve zamandan tasarruf etmenizi sa\u011flar.  Bu da ek bir tasar\u0131m program\u0131na ihtiya\u00e7 duymadan do\u011frudan metin edit\u00f6r\u00fcn\u00fcz\u00fc kullanabilece\u011finiz anlam\u0131na gelir.<\/p>\n<h2>Sonu\u00e7<\/h2>\n<p>Mermaid.js, teknik dok\u00fcmanlar\u0131n\u0131z\u0131 ve sunumlar\u0131n\u0131z\u0131 daha etkileyici ve anla\u015f\u0131l\u0131r k\u0131lman\u0131n kolay ve g\u00fc\u00e7l\u00fc bir yoludur.  Bu makalede ele ald\u0131\u011f\u0131m temel bilgilerle ba\u015flayarak,  kendi diyagramlar\u0131n\u0131z\u0131 olu\u015fturmaya ve projelerinizde kullanmaya ba\u015flayabilirsiniz. Unutmay\u0131n ki,  <a href=\"https:\/\/mermaid-js.github.io\/mermaid\/#\/documentation\">resmi Mermaid.js dok\u00fcmantasyonu<\/a> daha detayl\u0131 bilgi edinmek i\u00e7in m\u00fckemmel bir kaynakt\u0131r.  Daha fazla ipucu ve p\u00fcf noktas\u0131 i\u00e7in <a href=\"https:\/\/fatihsoysal.com\">web sitemi<\/a> ziyaret edebilirsiniz.<\/p>\n<p>#Etiketler: Mermaid.js, diyagram, Markdown, g\u00f6rselle\u015ftirme, hile sayfas\u0131, ak\u0131\u015f \u015femas\u0131, Gantt \u015femas\u0131, s\u0131n\u0131f diyagram\u0131, kod, JavaScript,  teknik dok\u00fcman,  blog, sunum<\/p>\n","protected":false},"excerpt":{"rendered":"Mermaid.js ile Diyagramlar Olu\u015fturma: H\u0131zl\u0131 Ba\u015flang\u0131\u00e7 K\u0131lavuzu Son zamanlarda Mermaid.js ile olduk\u00e7a fazla vakit ge\u00e7iriyorum ve t\u00fcm temel&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":[1],"tags":[],"class_list":{"0":"post-18665","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>Mermaid.js ile Diyagramlar Olu\u015fturma: H\u0131zl\u0131 Ba\u015flang\u0131\u00e7 K\u0131lavuzu<\/title>\n<meta name=\"description\" content=\"Son zamanlarda Mermaid.js ile olduk\u00e7a fazla vakit ge\u00e7iriyorum ve t\u00fcm temel ihtiya\u00e7lar\u0131 kapsayan bir hile sayfas\u0131 olu\u015fturdum. Bu sayede d\u00fcz metni, Markdown dosyan\u0131z\u0131n i\u00e7inde do\u011frudan diyagrama d\u00f6n\u00fc\u015ft\u00fcrebilirsiniz. Bu, fikirlerinizi g\u00f6rselle\u015ftirmeyi inan\u0131lmaz derecede kolayla\u015ft\u0131r\u0131yor. Asl\u0131nda, kendi web sitemde de bu tekni\u011fi s\u0131kl\u0131kla kullan\u0131yorum. Mermaid.js&#039;in sundu\u011fu esneklik ve kolayl\u0131k, teknik dok\u00fcmanlar\u0131m\u0131 ve a\u00e7\u0131klamalar\u0131m\u0131 \u00e7ok daha anla\u015f\u0131l\u0131r hale getiriyor.\" \/>\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\/mermaid-js-ile-diyagramlar-olusturma-hizli-baslangic-kilavuzu\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Mermaid.js ile Diyagramlar Olu\u015fturma: H\u0131zl\u0131 Ba\u015flang\u0131\u00e7 K\u0131lavuzu\" \/>\n<meta property=\"og:description\" content=\"Son zamanlarda Mermaid.js ile olduk\u00e7a fazla vakit ge\u00e7iriyorum ve t\u00fcm temel ihtiya\u00e7lar\u0131 kapsayan bir hile sayfas\u0131 olu\u015fturdum. Bu sayede d\u00fcz metni, Markdown dosyan\u0131z\u0131n i\u00e7inde do\u011frudan diyagrama d\u00f6n\u00fc\u015ft\u00fcrebilirsiniz. Bu, fikirlerinizi g\u00f6rselle\u015ftirmeyi inan\u0131lmaz derecede kolayla\u015ft\u0131r\u0131yor. Asl\u0131nda, kendi web sitemde de bu tekni\u011fi s\u0131kl\u0131kla kullan\u0131yorum. Mermaid.js&#039;in sundu\u011fu esneklik ve kolayl\u0131k, teknik dok\u00fcmanlar\u0131m\u0131 ve a\u00e7\u0131klamalar\u0131m\u0131 \u00e7ok daha anla\u015f\u0131l\u0131r hale getiriyor.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/mermaid-js-ile-diyagramlar-olusturma-hizli-baslangic-kilavuzu\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-04-20T03:45:13+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=\"2 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/mermaid-js-ile-diyagramlar-olusturma-hizli-baslangic-kilavuzu\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/mermaid-js-ile-diyagramlar-olusturma-hizli-baslangic-kilavuzu\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"Mermaid.js ile Diyagramlar Olu\u015fturma: H\u0131zl\u0131 Ba\u015flang\u0131\u00e7 K\u0131lavuzu\",\"datePublished\":\"2025-04-20T03:45:13+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/mermaid-js-ile-diyagramlar-olusturma-hizli-baslangic-kilavuzu\/\"},\"wordCount\":492,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/mermaid-js-ile-diyagramlar-olusturma-hizli-baslangic-kilavuzu\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/mermaid-js-ile-diyagramlar-olusturma-hizli-baslangic-kilavuzu\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/mermaid-js-ile-diyagramlar-olusturma-hizli-baslangic-kilavuzu\/\",\"name\":\"Mermaid.js ile Diyagramlar Olu\u015fturma: H\u0131zl\u0131 Ba\u015flang\u0131\u00e7 K\u0131lavuzu\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-04-20T03:45:13+00:00\",\"description\":\"Son zamanlarda Mermaid.js ile olduk\u00e7a fazla vakit ge\u00e7iriyorum ve t\u00fcm temel ihtiya\u00e7lar\u0131 kapsayan bir hile sayfas\u0131 olu\u015fturdum. Bu sayede d\u00fcz metni, Markdown dosyan\u0131z\u0131n i\u00e7inde do\u011frudan diyagrama d\u00f6n\u00fc\u015ft\u00fcrebilirsiniz. Bu, fikirlerinizi g\u00f6rselle\u015ftirmeyi inan\u0131lmaz derecede kolayla\u015ft\u0131r\u0131yor. Asl\u0131nda, kendi web sitemde de bu tekni\u011fi s\u0131kl\u0131kla kullan\u0131yorum. Mermaid.js'in sundu\u011fu esneklik ve kolayl\u0131k, teknik dok\u00fcmanlar\u0131m\u0131 ve a\u00e7\u0131klamalar\u0131m\u0131 \u00e7ok daha anla\u015f\u0131l\u0131r hale getiriyor.\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/mermaid-js-ile-diyagramlar-olusturma-hizli-baslangic-kilavuzu\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/mermaid-js-ile-diyagramlar-olusturma-hizli-baslangic-kilavuzu\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/mermaid-js-ile-diyagramlar-olusturma-hizli-baslangic-kilavuzu\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Mermaid.js ile Diyagramlar Olu\u015fturma: H\u0131zl\u0131 Ba\u015flang\u0131\u00e7 K\u0131lavuzu\"}]},{\"@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":"Mermaid.js ile Diyagramlar Olu\u015fturma: H\u0131zl\u0131 Ba\u015flang\u0131\u00e7 K\u0131lavuzu","description":"Son zamanlarda Mermaid.js ile olduk\u00e7a fazla vakit ge\u00e7iriyorum ve t\u00fcm temel ihtiya\u00e7lar\u0131 kapsayan bir hile sayfas\u0131 olu\u015fturdum. Bu sayede d\u00fcz metni, Markdown dosyan\u0131z\u0131n i\u00e7inde do\u011frudan diyagrama d\u00f6n\u00fc\u015ft\u00fcrebilirsiniz. Bu, fikirlerinizi g\u00f6rselle\u015ftirmeyi inan\u0131lmaz derecede kolayla\u015ft\u0131r\u0131yor. Asl\u0131nda, kendi web sitemde de bu tekni\u011fi s\u0131kl\u0131kla kullan\u0131yorum. Mermaid.js'in sundu\u011fu esneklik ve kolayl\u0131k, teknik dok\u00fcmanlar\u0131m\u0131 ve a\u00e7\u0131klamalar\u0131m\u0131 \u00e7ok daha anla\u015f\u0131l\u0131r hale getiriyor.","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\/mermaid-js-ile-diyagramlar-olusturma-hizli-baslangic-kilavuzu\/","og_locale":"tr_TR","og_type":"article","og_title":"Mermaid.js ile Diyagramlar Olu\u015fturma: H\u0131zl\u0131 Ba\u015flang\u0131\u00e7 K\u0131lavuzu","og_description":"Son zamanlarda Mermaid.js ile olduk\u00e7a fazla vakit ge\u00e7iriyorum ve t\u00fcm temel ihtiya\u00e7lar\u0131 kapsayan bir hile sayfas\u0131 olu\u015fturdum. Bu sayede d\u00fcz metni, Markdown dosyan\u0131z\u0131n i\u00e7inde do\u011frudan diyagrama d\u00f6n\u00fc\u015ft\u00fcrebilirsiniz. Bu, fikirlerinizi g\u00f6rselle\u015ftirmeyi inan\u0131lmaz derecede kolayla\u015ft\u0131r\u0131yor. Asl\u0131nda, kendi web sitemde de bu tekni\u011fi s\u0131kl\u0131kla kullan\u0131yorum. Mermaid.js'in sundu\u011fu esneklik ve kolayl\u0131k, teknik dok\u00fcmanlar\u0131m\u0131 ve a\u00e7\u0131klamalar\u0131m\u0131 \u00e7ok daha anla\u015f\u0131l\u0131r hale getiriyor.","og_url":"https:\/\/fatihsoysal.com\/blog\/mermaid-js-ile-diyagramlar-olusturma-hizli-baslangic-kilavuzu\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-04-20T03:45:13+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"2 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/mermaid-js-ile-diyagramlar-olusturma-hizli-baslangic-kilavuzu\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/mermaid-js-ile-diyagramlar-olusturma-hizli-baslangic-kilavuzu\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"Mermaid.js ile Diyagramlar Olu\u015fturma: H\u0131zl\u0131 Ba\u015flang\u0131\u00e7 K\u0131lavuzu","datePublished":"2025-04-20T03:45:13+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/mermaid-js-ile-diyagramlar-olusturma-hizli-baslangic-kilavuzu\/"},"wordCount":492,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/mermaid-js-ile-diyagramlar-olusturma-hizli-baslangic-kilavuzu\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/mermaid-js-ile-diyagramlar-olusturma-hizli-baslangic-kilavuzu\/","url":"https:\/\/fatihsoysal.com\/blog\/mermaid-js-ile-diyagramlar-olusturma-hizli-baslangic-kilavuzu\/","name":"Mermaid.js ile Diyagramlar Olu\u015fturma: H\u0131zl\u0131 Ba\u015flang\u0131\u00e7 K\u0131lavuzu","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-04-20T03:45:13+00:00","description":"Son zamanlarda Mermaid.js ile olduk\u00e7a fazla vakit ge\u00e7iriyorum ve t\u00fcm temel ihtiya\u00e7lar\u0131 kapsayan bir hile sayfas\u0131 olu\u015fturdum. Bu sayede d\u00fcz metni, Markdown dosyan\u0131z\u0131n i\u00e7inde do\u011frudan diyagrama d\u00f6n\u00fc\u015ft\u00fcrebilirsiniz. Bu, fikirlerinizi g\u00f6rselle\u015ftirmeyi inan\u0131lmaz derecede kolayla\u015ft\u0131r\u0131yor. Asl\u0131nda, kendi web sitemde de bu tekni\u011fi s\u0131kl\u0131kla kullan\u0131yorum. Mermaid.js'in sundu\u011fu esneklik ve kolayl\u0131k, teknik dok\u00fcmanlar\u0131m\u0131 ve a\u00e7\u0131klamalar\u0131m\u0131 \u00e7ok daha anla\u015f\u0131l\u0131r hale getiriyor.","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/mermaid-js-ile-diyagramlar-olusturma-hizli-baslangic-kilavuzu\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/mermaid-js-ile-diyagramlar-olusturma-hizli-baslangic-kilavuzu\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/mermaid-js-ile-diyagramlar-olusturma-hizli-baslangic-kilavuzu\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Mermaid.js ile Diyagramlar Olu\u015fturma: H\u0131zl\u0131 Ba\u015flang\u0131\u00e7 K\u0131lavuzu"}]},{"@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\/18665","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=18665"}],"version-history":[{"count":0,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/18665\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=18665"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=18665"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=18665"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}