{"id":21997,"date":"2020-01-08T18:35:14","date_gmt":"2020-01-08T18:35:14","guid":{"rendered":"http:\/\/create_markdown_diagrams_and_charts_for_developers_and_architects"},"modified":"2024-05-29T16:37:21","modified_gmt":"2024-05-29T23:37:21","slug":"create_markdown_diagrams_and_charts_for_developers_and_architects","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/create_markdown_diagrams_and_charts_for_developers_and_architects","title":{"rendered":"Create Markdown Diagrams and Charts for Developers and Architects"},"content":{"rendered":"\n\n<div class=\"wp-block-cloudinary-markdown \"><p>Oftentimes, developers and architects must supplement their project documents with diagrams, charts, sequence drawings, and the like. Instead of creating them with traditional software like Microsoft Visio, I searched for a more developer-friendly alternative and found a project with just the right tool, which I was able to integrate with Cloudinary with gratifying results. This post describes the tool and the integration steps.<\/p>\n<div class='c-callout  c-callout--inline-title c-callout--note'><strong class='c-callout__title'>Note:<\/strong> <p>We created a live environment for users to test the markdown diagram tool at <a href=\"https:\/\/mermaid.cloudinary.us\/\">mermaid.cloudinary.us<\/a><\/p><\/div>\n<h2>Visio\u2019s Limitations<\/h2>\n<p>Although Visio is a viable tool, I found it difficult to use because of these limitations:<\/p>\n<ul>\n<li>All team members must procure the software or establish an account with the service.<\/li>\n<li>Artifacts are stored outside the source hierarchy.<\/li>\n<li>Running <code>diff<\/code> to compare changes is onerous.<\/li>\n<\/ul>\n<p>Additionally, I had to pinpoint the right color combinations and laboriously arrange the objects in diagrams to make them look pretty. Those chores were time-consuming and distracting from the core task of documenting a complex workflow. I wanted a tool with which I could simply \u201cwrite\u201d a markdown diagram, after which the tool would do the heavy lifting of prettying up the image with the right colors, spacing, and fonts. Guess what, I found just such a tool\u2014in <a href=\"https:\/\/github.com\/mermaid-js\/mermaid\">mermaid<\/a>!<\/p>\n<h2>Mermaid\u2019s Capabilities<\/h2>\n<p>Highlighted on mermaid\u2019s repo\u2019s page is the goal of the project:<\/p>\n<p><em>Generate diagrams, charts, graphs, or flows from Markdown-like text via JavaScript.<\/em><\/p>\n<p>You can create many types of diagrams on mermaid: flow charts, Gantt charts, sequence diagrams, class diagrams, state diagrams. Since the actual diagram is rendered in plain Markdown, you can add the source to version control so that updates are readily accessible by your team for collaboration. Also, mermaid offers a <a href=\"https:\/\/github.com\/mermaidjs\/mermaid-live-editor\">live editor<\/a>, which you can download and then host the code for your team. Alternatively, you can use the <a href=\"https:\/\/mermaidjs.github.io\/mermaid-live-editor\/\">publicly-hosted editor<\/a>.<\/p>\n<h2>A Cloudinary-Mermaid Integration<\/h2>\n<p>I was hooked on mermaid from the start and used it heavily. However, the Scalable Vector Graphics (SVG) images it produces don\u2019t work well for presentations. To resolve that issue, I exported the SVG format to a raster format like PNG. Below are the steps. In the meantime, claim your Cloudinary free forever account <a href=\"https:\/\/cloudinary.com\/users\/register\/free\/?utm_content=cta-free-sign-up-sb-mrk-diag\">here<\/a>.<\/p>\n<p>Disclaimer: I\u2019m not a React developer. This is my first attempt at hacking so please ignore my lack of syntactic elegance.<\/p>\n<p><strong>Step 1: Add an option to the Actions tab.<\/strong><\/p>\n<p>The mermaid live editor offers two options in the <strong>Actions<\/strong> tab: <strong>Link to View<\/strong> and <strong>Download SVG<\/strong>, which produces a <code>.svg<\/code> file.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/image\/upload\/f_auto,q_auto,dpr_2.0\/Web_Assets\/blog\/action_to_download_image.png\" alt=\"Action to download image\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"410\" height=\"198\"\/><\/p>\n<p>I added an option called <strong>Download Image<\/strong>\u2014<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/image\/upload\/f_auto,q_auto,dpr_2.0\/Web_Assets\/blog\/default_20actions.png\" alt=\"default actions\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"688\" height=\"214\"\/><\/p>\n<p>\u2014by adding the following code to the <code>render<\/code> method in the <code>src\/components\/Preview.js<\/code> file:<\/p>\n<pre class=\"js-syntax-highlighted\"><code>&lt;Divider type='vertical' \/&gt;\n          &lt;a href='' download='' target='_blank' onClick={this.handleOnDownloadImage}&gt;Download Image&lt;\/a&gt;\n<\/code><\/pre>\n<p>Since all my code was in a file called <code>uploader.js<\/code>, which exported a method called <code>upload<\/code>, I imported that method, like this:<\/p>\n<pre class=\"js-syntax-highlighted\"><code>import { upload } from '.\/uploader'\n<\/code><\/pre>\n<p>Next, I registered the handle in the constructor:<\/p>\n<pre class=\"js-syntax-highlighted\"><code>this.handleOnDownloadImage = this.handleOnDownloadImage.bind(this)\n<\/code><\/pre>\n<p>I then added the function for the <code>onClick<\/code> handler, as follows:<\/p>\n<pre class=\"js-syntax-highlighted\"><code>handleOnDownloadImage (event) {\n    const svgObject = `data:image\/svg+xml;base64,${Base64.encode(this.container.innerHTML)}`   \n    event.target.href = upload(svgObject)\n    \/\/ useful if you right-click and download\n    event.target.download = 'mermaid.png'\n  }\n<\/code><\/pre>\n<p>See the full <a href=\"https:\/\/gist.github.com\/akshay-ranganath\/7b0f9a00e2a8641d5b149c35c9b7ec39\"><code>Preview.js<\/code><\/a> file for reference.<\/p>\n<p><strong>Step 2: Add the upload capability.<\/strong><\/p>\n<p>To add the function that handles uploads to Cloudinary, I made use of the <a href=\"https:\/\/cloudinary.com\/documentation\/upload_images#unsigned_upload\"><code>unsigned upload<\/code><\/a> method, which requires no authentication, enabling everyone to access the image. To simplify the process, I uploaded with a raw <code>API POST<\/code> request instead of working through an SDK. Here are the details of the upload request:<\/p>\n<ul>\n<li>\n<p><strong>API endpoint:<\/strong> <code>https:\/\/api.cloudinary.com\/v1_1\/mermaid\/upload<\/code>, where <code>mermaid<\/code> is the cloud name. If you have a Cloudinary account, replace <code>mermaid<\/code> in the code with your cloud name.<\/p>\n<\/li>\n<li>\n<p><strong>JSON request body:<\/strong><\/p>\n<ul>\n<li>\n<code>file<\/code>: This is a Base64-encoded string of the SVG object.\n*<code>tag<\/code>: This is a tag with the value <code>mermaid<\/code>. You can add more meaningful data to it, e.g., the diagram type, the diagram context, the associated project, etc.<\/li>\n<li>\n<code>upload_preset<\/code>: This is the preset that is defined in your account. Below are my settings:<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/image\/upload\/f_auto,q_auto,dpr_2.0\/Web_Assets\/blog\/upload_transformation.png\" alt=\"Upload transformation\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1204\" height=\"260\"\/><\/p>\n<p>Here\u2019s the code for the  <code>upload<\/code> function:<\/p>\n<pre class=\"js-syntax-highlighted\"><code>var url = 'https:\/\/api.cloudinary.com\/v1_1\/mermaid\/upload'\n  var xhr = new XMLHttpRequest() \n  var fd = new FormData() \n  xhr.open('POST', url, false)\n  xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest')\n  \/\/ fd.append('public_id', publicId)\n  fd.append('upload_preset', 'mermaid')\n  fd.append('tags', 'Mermaid') \n  fd.append('file', svgImage)\n<\/code><\/pre>\n<p>This function obtains the SVG image data from <code>Preview.js<\/code>, invokes the <code>upload<\/code> function, and picks up the URL for the uploaded SVG image. I added the following Cloudinary transformations to enhance the image:<\/p>\n<ol>\n<li>Convert the image format from  SVG to PNG.<\/li>\n<li>Apply three transformations:\n<ul>\n<li>Add a solid black background (<code>bo_3px_solid_rgb:00390b<\/code>) to the image. For details, see the <a href=\"https:\/\/cloudinary.com\/documentation\/image_transformation_reference#format_parameter\">Cloudinary API Reference on <code>format<\/code><\/a>.<\/li>\n<li>Replace the default transparent background with a white background (b_white). For details, see the <a href=\"https:\/\/cloudinary.com\/documentation\/transformation_reference\">Cloudinary API Reference on <code>background<\/code><\/a>.<\/li>\n<li>Overlay the Cloudinary (<code>l_cloudinary_icon,w_0.1,g_south_east,o_7<\/code>) icon at the bottom right corner. For details, see the <a href=\"https:\/\/cloudinary.com\/documentation\/image_transformation_reference#overlay_parameter\">Cloudinary API Reference on <code>overlay<\/code><\/a>.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<p>Cloudinary then returns the final URL and the browser opens the image in a new tab. Here\u2019s the <a href=\"https:\/\/gist.github.com\/akshay-ranganath\/2a195eb33890c44a7a21b3bb3d90ad46\">complete code<\/a> of the uploader.\nThe diagram below image explains the workflow.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/mermaid\/image\/upload\/bo_3px_solid_rgb:00390b\/b_white\/l_cloudinary_icon,w_0.1,g_south_east,o_70\/f_auto,q_auto\/ksmnxcfgabep32zcubqz\" alt=\"Diagram\" loading=\"lazy\" class=\"c-transformed-asset\" \/><\/p>\n<p>Here\u2019s the markup for the sequence diagram:<\/p>\n<pre class=\"js-syntax-highlighted\"><code>sequenceDiagram\nUser--&gt;&gt;Mermaid: Create a diagram\nMermaid--&gt;&gt;Mermaid: Generate SVG\nNote over User, Mermaid: Update diagram as it is being edited\nUser--&gt;&gt;Mermaid: Click Download Image\nMermaid--&gt;&gt;Uploader: Pass SVG data\nUploader--&gt;&gt;Uploader: Build unsigned upload POST request\nUploader--&gt;&gt;Cloudinary: Upload SVG\nCloudinary--&gt;&gt;Uploader: Generate Cloudinary URL\nUploader--&gt;&gt;Uploader: Build transformed PNG URL\nNote over Uploader,Mermaid: Change format, transparency, overlay\nUploader--&gt;&gt;Mermaid: Respond with Cloudinary PNG URL\nMermaid--&gt;&gt;User: Display image\n<\/code><\/pre>\n<h2>Image Security<\/h2>\n<p>Recall that the integration makes use of the simple <code>unsigned upload<\/code> method. For tighter security, switch to the <code>signed upload<\/code> method instead. Also, to prevent unauthorized users from uploading images to your account, <strong>do not<\/strong> turn on <code>unsigned upload<\/code>. You could also lock down access to your images.\nFor details on the various ways of securing digital assets, read this <a href=\"https:\/\/support.cloudinary.com\/hc\/en-us\/articles\/202519742-Can-I-allow-access-to-uploaded-images-only-to-authenticated-users-\">Cloudinary Support article<\/a>.\nWould this Cloudinary-mermaid integration be of use to you? If so, do give it a try.<\/p>\n<\/div>\n\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":21998,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[25],"class_list":["post-21997","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-asset-management"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.6 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Create Markdown Diagrams and Charts<\/title>\n<meta name=\"description\" content=\"Learn how to integrate mermaid and Cloudinary to create diagrams from Markdown text and automatically format and enhance them with colors, spacing, and fonts.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/create_markdown_diagrams_and_charts_for_developers_and_architects\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create Markdown Diagrams and Charts for Developers and Architects\" \/>\n<meta property=\"og:description\" content=\"Learn how to integrate mermaid and Cloudinary to create diagrams from Markdown text and automatically format and enhance them with colors, spacing, and fonts.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/create_markdown_diagrams_and_charts_for_developers_and_architects\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2020-01-08T18:35:14+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-05-29T23:37:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1649720607\/Web_Assets\/blog\/Diagramming-With-Markdown-and-Cloudinary_21998029e6\/Diagramming-With-Markdown-and-Cloudinary_21998029e6-png?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"1540\" \/>\n\t<meta property=\"og:image:height\" content=\"847\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/create_markdown_diagrams_and_charts_for_developers_and_architects#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/create_markdown_diagrams_and_charts_for_developers_and_architects\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Create Markdown Diagrams and Charts for Developers and Architects\",\"datePublished\":\"2020-01-08T18:35:14+00:00\",\"dateModified\":\"2024-05-29T23:37:21+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/create_markdown_diagrams_and_charts_for_developers_and_architects\"},\"wordCount\":9,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/create_markdown_diagrams_and_charts_for_developers_and_architects#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649720607\/Web_Assets\/blog\/Diagramming-With-Markdown-and-Cloudinary_21998029e6\/Diagramming-With-Markdown-and-Cloudinary_21998029e6.png?_i=AA\",\"keywords\":[\"Asset Management\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2020\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/create_markdown_diagrams_and_charts_for_developers_and_architects\",\"url\":\"https:\/\/cloudinary.com\/blog\/create_markdown_diagrams_and_charts_for_developers_and_architects\",\"name\":\"Create Markdown Diagrams and Charts\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/create_markdown_diagrams_and_charts_for_developers_and_architects#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/create_markdown_diagrams_and_charts_for_developers_and_architects#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649720607\/Web_Assets\/blog\/Diagramming-With-Markdown-and-Cloudinary_21998029e6\/Diagramming-With-Markdown-and-Cloudinary_21998029e6.png?_i=AA\",\"datePublished\":\"2020-01-08T18:35:14+00:00\",\"dateModified\":\"2024-05-29T23:37:21+00:00\",\"description\":\"Learn how to integrate mermaid and Cloudinary to create diagrams from Markdown text and automatically format and enhance them with colors, spacing, and fonts.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/create_markdown_diagrams_and_charts_for_developers_and_architects#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/create_markdown_diagrams_and_charts_for_developers_and_architects\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/create_markdown_diagrams_and_charts_for_developers_and_architects#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649720607\/Web_Assets\/blog\/Diagramming-With-Markdown-and-Cloudinary_21998029e6\/Diagramming-With-Markdown-and-Cloudinary_21998029e6.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649720607\/Web_Assets\/blog\/Diagramming-With-Markdown-and-Cloudinary_21998029e6\/Diagramming-With-Markdown-and-Cloudinary_21998029e6.png?_i=AA\",\"width\":1540,\"height\":847},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/create_markdown_diagrams_and_charts_for_developers_and_architects#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Create Markdown Diagrams and Charts for Developers and Architects\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Create Markdown Diagrams and Charts","description":"Learn how to integrate mermaid and Cloudinary to create diagrams from Markdown text and automatically format and enhance them with colors, spacing, and fonts.","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:\/\/cloudinary.com\/blog\/create_markdown_diagrams_and_charts_for_developers_and_architects","og_locale":"en_US","og_type":"article","og_title":"Create Markdown Diagrams and Charts for Developers and Architects","og_description":"Learn how to integrate mermaid and Cloudinary to create diagrams from Markdown text and automatically format and enhance them with colors, spacing, and fonts.","og_url":"https:\/\/cloudinary.com\/blog\/create_markdown_diagrams_and_charts_for_developers_and_architects","og_site_name":"Cloudinary Blog","article_published_time":"2020-01-08T18:35:14+00:00","article_modified_time":"2024-05-29T23:37:21+00:00","og_image":[{"width":1540,"height":847,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1649720607\/Web_Assets\/blog\/Diagramming-With-Markdown-and-Cloudinary_21998029e6\/Diagramming-With-Markdown-and-Cloudinary_21998029e6-png?_i=AA","type":"image\/png"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/create_markdown_diagrams_and_charts_for_developers_and_architects#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/create_markdown_diagrams_and_charts_for_developers_and_architects"},"author":{"name":"","@id":""},"headline":"Create Markdown Diagrams and Charts for Developers and Architects","datePublished":"2020-01-08T18:35:14+00:00","dateModified":"2024-05-29T23:37:21+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/create_markdown_diagrams_and_charts_for_developers_and_architects"},"wordCount":9,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/create_markdown_diagrams_and_charts_for_developers_and_architects#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649720607\/Web_Assets\/blog\/Diagramming-With-Markdown-and-Cloudinary_21998029e6\/Diagramming-With-Markdown-and-Cloudinary_21998029e6.png?_i=AA","keywords":["Asset Management"],"inLanguage":"en-US","copyrightYear":"2020","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/create_markdown_diagrams_and_charts_for_developers_and_architects","url":"https:\/\/cloudinary.com\/blog\/create_markdown_diagrams_and_charts_for_developers_and_architects","name":"Create Markdown Diagrams and Charts","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/create_markdown_diagrams_and_charts_for_developers_and_architects#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/create_markdown_diagrams_and_charts_for_developers_and_architects#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649720607\/Web_Assets\/blog\/Diagramming-With-Markdown-and-Cloudinary_21998029e6\/Diagramming-With-Markdown-and-Cloudinary_21998029e6.png?_i=AA","datePublished":"2020-01-08T18:35:14+00:00","dateModified":"2024-05-29T23:37:21+00:00","description":"Learn how to integrate mermaid and Cloudinary to create diagrams from Markdown text and automatically format and enhance them with colors, spacing, and fonts.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/create_markdown_diagrams_and_charts_for_developers_and_architects#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/create_markdown_diagrams_and_charts_for_developers_and_architects"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/create_markdown_diagrams_and_charts_for_developers_and_architects#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649720607\/Web_Assets\/blog\/Diagramming-With-Markdown-and-Cloudinary_21998029e6\/Diagramming-With-Markdown-and-Cloudinary_21998029e6.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649720607\/Web_Assets\/blog\/Diagramming-With-Markdown-and-Cloudinary_21998029e6\/Diagramming-With-Markdown-and-Cloudinary_21998029e6.png?_i=AA","width":1540,"height":847},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/create_markdown_diagrams_and_charts_for_developers_and_architects#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Create Markdown Diagrams and Charts for Developers and Architects"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":""}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649720607\/Web_Assets\/blog\/Diagramming-With-Markdown-and-Cloudinary_21998029e6\/Diagramming-With-Markdown-and-Cloudinary_21998029e6.png?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21997","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=21997"}],"version-history":[{"count":3,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21997\/revisions"}],"predecessor-version":[{"id":34129,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21997\/revisions\/34129"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/21998"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=21997"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=21997"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=21997"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}