{"id":28616,"date":"2024-07-09T11:08:26","date_gmt":"2024-07-09T09:08:26","guid":{"rendered":"https:\/\/www.codemotion.com\/magazine\/?p=28616"},"modified":"2024-09-03T12:14:07","modified_gmt":"2024-09-03T10:14:07","slug":"excalidraw-diagrams-set-in-stone","status":"publish","type":"post","link":"https:\/\/www.codemotion.com\/magazine\/frontend\/excalidraw-diagrams-set-in-stone\/","title":{"rendered":"Excalidraw: Diagrams Set in Stone"},"content":{"rendered":"\n<p><em>&#8220;Anyone who uses this tool will be rightfully King of Flowcharts&#8221;<\/em> These are the words engraved under the golden hilt of <strong>Excalidraw<\/strong>, the Open Source project I&#8217;ll talk about today.<\/p>\n\n\n\n<p>Welcome to OpenDev Explorer, my column dedicated to exploring the <a href=\"https:\/\/www.codemotion.com\/magazine\/dev-life\/open-source-month-5-tools-to-definitely-try\/\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\">Open Source world with a nod to developer experience<\/a>. I am Riccardo (aka TheZal) and today I will talk about Excalidraw, an open-source tool for creating flowcharts as well as &#8220;freehand&#8221; drawings for anyone who needs to put their ideas on digital paper.<\/p>\n\n\n\n<p><strong>General Overview<\/strong><\/p>\n\n\n\n<p>Excalidraw is an online open-source drawing tool that allows you to create sketches and diagrams easily and intuitively.<\/p>\n\n\n\n<p>Its minimal user interface makes it easy to draw as if it were on paper, ideal for brainstorming, flowcharts, and wireframing. Additionally, <strong>Excalidraw supports real-time collaboration<\/strong>, allowing multiple users to work together on the same project.<\/p>\n\n\n\n<p>It is appreciated for its ability to create hand-drawn-looking drawings and offers export options in various formats, such as PNG and SVG, making it a valuable tool for everyone.<\/p>\n\n\n\n<p><strong>User Manual<\/strong><\/p>\n\n\n\n<p><strong>Installation<\/strong><\/p>\n\n\n\n<p>Installing Excalidraw is very simple, as it is available through various package managers such as npm and yarn, and can be installed using one of the following commands:<\/p>\n\n\n\n<p>Using npm:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-tag\">npm<\/span> <span class=\"hljs-selector-tag\">install<\/span> <span class=\"hljs-selector-tag\">react<\/span> <span class=\"hljs-selector-tag\">react-dom<\/span> <span class=\"hljs-keyword\">@excalidraw<\/span>\/excalidraw\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Using yarn:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-tag\">yarn<\/span> <span class=\"hljs-selector-tag\">add<\/span> <span class=\"hljs-selector-tag\">react<\/span> <span class=\"hljs-selector-tag\">react-dom<\/span> <span class=\"hljs-keyword\">@excalidraw<\/span>\/excalidraw\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p><strong>Usage<\/strong><\/p>\n\n\n\n<p>Using Excalidraw is also very simple, as you just need to import the library into your component and create the object directly from the library. Here is an example:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-keyword\">import<\/span> { Excalidraw } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"@excalidraw\/excalidraw\"<\/span>;\n\n<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">App<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n  <span class=\"hljs-keyword\">return<\/span> (\n    <span class=\"xml\"><span class=\"hljs-tag\">&lt;&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">{{<\/span> <span class=\"hljs-attr\">textAlign:<\/span> \"<span class=\"hljs-attr\">center<\/span>\" }}&gt;<\/span>Excalidraw Example<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">{{<\/span> <span class=\"hljs-attr\">height:<\/span> \"<span class=\"hljs-attr\">500px<\/span>\" }}&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Excalidraw<\/span> \/&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/&gt;<\/span><\/span>\n  );\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p><strong>Developer Experience<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"651\" src=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/image-1024x651.png\" alt=\"excalidraw\" class=\"wp-image-28522\" srcset=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/image-1024x651.png 1024w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/image-300x191.png 300w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/image-768x488.png 768w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/image-1536x977.png 1536w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/image-2048x1302.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Excalidraw is highly appreciated by developers for the ease with which it can be implemented in their projects.<\/p>\n\n\n\n<p>Being open-source, it offers great flexibility and customization possibilities, allowing developers to adapt it to the specific needs of their software. Furthermore, its API is well-documented and allows easy integration with other applications and platforms.<\/p>\n\n\n\n<p>The lightweight code and modular architecture contribute to easy maintenance and scalability, making it a reliable choice for projects of any size.<\/p>\n\n\n\n<p><strong>The Extra Mile<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"600\" src=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/image.gif\" alt=\"\" class=\"wp-image-28521\"\/><\/figure>\n\n\n\n<p>The extra mile of Excalidraw is given by the possibility of real-time collaboration between teams, allowing multiple users to work simultaneously on the same drawing, facilitating idea sharing and improving team productivity.<\/p>\n\n\n\n<p>In fact, to create a collaborative session on Excalidraw, you just need to start a session from the &#8220;Share&#8221; button and send the generated link. All participants will be able to see and edit the drawing in real-time.<\/p>\n\n\n\n<p><strong>Comparison with the Status Quo<\/strong><\/p>\n\n\n\n<p>Excalidraw stands out among its competitors like Draw.io thanks to its simplicity and immediacy. This online drawing tool offers an intuitive interface that allows you to create diagrams and sketches with ease, without a steep learning curve.<\/p>\n\n\n\n<p>Its open-source nature guarantees flexibility and continuous innovation from the community, which particularly appreciates it and makes it almost \u201ccommunity-driven\u201d.<\/p>\n\n\n\n<p>Moreover, Excalidraw excels in real-time collaboration, allowing multiple users to work simultaneously on a project with immediate updates, something not possible, for example, with Draw.io.<\/p>\n\n\n\n<p>Unlike more complex tools, Excalidraw focuses on essentiality and speed, making it ideal for brainstorming and rapid prototyping.<\/p>\n\n\n\n<p><strong>Final Thoughts<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"870\" height=\"494\" src=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/image.webp\" alt=\"excalidraw deployment\" class=\"wp-image-28523\" srcset=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/image.webp 870w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/image-300x170.webp 300w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/image-768x436.webp 768w\" sizes=\"auto, (max-width: 870px) 100vw, 870px\" \/><\/figure>\n\n\n\n<p>So, Excalidraw is super easy to implement, super simple to use, and also has built-in real-time collaboration features, making it the perfect tool to use for project creation and prototyping.<\/p>\n\n\n\n<p>Additionally, it is appreciated for its ability to create drawings that look hand-drawn and offers export options in various formats, such as PNG and SVG, while keeping the file editable, making it a valuable tool for everyone.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>&#8220;Anyone who uses this tool will be rightfully King of Flowcharts&#8221; These are the words engraved under the golden hilt of Excalidraw, the Open Source project I&#8217;ll talk about today. Welcome to OpenDev Explorer, my column dedicated to exploring the Open Source world with a nod to developer experience. I am Riccardo (aka TheZal) and&#8230; <a class=\"more-link\" href=\"https:\/\/www.codemotion.com\/magazine\/frontend\/excalidraw-diagrams-set-in-stone\/\">Read more<\/a><\/p>\n","protected":false},"author":193,"featured_media":28520,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_editorskit_title_hidden":false,"_editorskit_reading_time":0,"_editorskit_is_block_options_detached":false,"_editorskit_block_options_position":"{}","_uag_custom_page_level_css":"","_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","footnotes":""},"categories":[6],"tags":[12365,12367],"collections":[],"class_list":{"0":"post-28616","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-frontend","8":"tag-excalidraw","9":"tag-open-source-tools","10":"entry"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.9 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Excalidraw: A Complete Introduction and Review - Codemotion<\/title>\n<meta name=\"description\" content=\"From the idea to the shared drawing with the whole team, through open source: today we explore Excalidraw. Read on!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.codemotion.com\/magazine\/frontend\/excalidraw-diagrams-set-in-stone\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Excalidraw: Diagrams Set in Stone\" \/>\n<meta property=\"og:description\" content=\"From the idea to the shared drawing with the whole team, through open source: today we explore Excalidraw. Read on!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codemotion.com\/magazine\/frontend\/excalidraw-diagrams-set-in-stone\/\" \/>\n<meta property=\"og:site_name\" content=\"Codemotion Magazine\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Codemotion.Italy\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-07-09T09:08:26+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-09-03T10:14:07+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/Excalidraw-cover.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"669\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"TheZal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CodemotionIT\" \/>\n<meta name=\"twitter:site\" content=\"@CodemotionIT\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"TheZal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/excalidraw-diagrams-set-in-stone\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/excalidraw-diagrams-set-in-stone\/\"},\"author\":{\"name\":\"TheZal\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/f3f099160f0d8f2f80c5e4f3c8d53503\"},\"headline\":\"Excalidraw: Diagrams Set in Stone\",\"datePublished\":\"2024-07-09T09:08:26+00:00\",\"dateModified\":\"2024-09-03T10:14:07+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/excalidraw-diagrams-set-in-stone\/\"},\"wordCount\":564,\"publisher\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/excalidraw-diagrams-set-in-stone\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/Excalidraw-cover.png\",\"keywords\":[\"excalidraw\",\"open source tools\"],\"articleSection\":[\"Frontend\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/excalidraw-diagrams-set-in-stone\/\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/excalidraw-diagrams-set-in-stone\/\",\"name\":\"Excalidraw: A Complete Introduction and Review - Codemotion\",\"isPartOf\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/excalidraw-diagrams-set-in-stone\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/excalidraw-diagrams-set-in-stone\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/Excalidraw-cover.png\",\"datePublished\":\"2024-07-09T09:08:26+00:00\",\"dateModified\":\"2024-09-03T10:14:07+00:00\",\"description\":\"From the idea to the shared drawing with the whole team, through open source: today we explore Excalidraw. Read on!\",\"breadcrumb\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/excalidraw-diagrams-set-in-stone\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.codemotion.com\/magazine\/frontend\/excalidraw-diagrams-set-in-stone\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/excalidraw-diagrams-set-in-stone\/#primaryimage\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/Excalidraw-cover.png\",\"contentUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/Excalidraw-cover.png\",\"width\":1280,\"height\":669,\"caption\":\"excalidraw codemotion magazine\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/excalidraw-diagrams-set-in-stone\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.codemotion.com\/magazine\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Frontend\",\"item\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Excalidraw: Diagrams Set in Stone\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#website\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/\",\"name\":\"Codemotion Magazine\",\"description\":\"We code the future. Together\",\"publisher\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.codemotion.com\/magazine\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#organization\",\"name\":\"Codemotion\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png\",\"contentUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png\",\"width\":225,\"height\":225,\"caption\":\"Codemotion\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Codemotion.Italy\/\",\"https:\/\/x.com\/CodemotionIT\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/f3f099160f0d8f2f80c5e4f3c8d53503\",\"name\":\"TheZal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/01\/avatar-100x100.png\",\"contentUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/01\/avatar-100x100.png\",\"caption\":\"TheZal\"},\"description\":\"Hello there! My name is Riccardo (aka TheZal), a passionate software engineer who loves to combine his passion for code with his love for fantasy realms like Dungeons and Dragons, Harry Potter, Star Wars, LOTR, etc., etc. I'm really into studying and exploring new technologies (with a lot of love for Open Source). I'm also a co-owner of a 12-year-old dachshund called Poldo, who is the mascot of my blog!\",\"sameAs\":[\"http:\/\/www.thezal.dev\"],\"url\":\"https:\/\/www.codemotion.com\/magazine\/author\/thezal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Excalidraw: A Complete Introduction and Review - Codemotion","description":"From the idea to the shared drawing with the whole team, through open source: today we explore Excalidraw. Read on!","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:\/\/www.codemotion.com\/magazine\/frontend\/excalidraw-diagrams-set-in-stone\/","og_locale":"en_US","og_type":"article","og_title":"Excalidraw: Diagrams Set in Stone","og_description":"From the idea to the shared drawing with the whole team, through open source: today we explore Excalidraw. Read on!","og_url":"https:\/\/www.codemotion.com\/magazine\/frontend\/excalidraw-diagrams-set-in-stone\/","og_site_name":"Codemotion Magazine","article_publisher":"https:\/\/www.facebook.com\/Codemotion.Italy\/","article_published_time":"2024-07-09T09:08:26+00:00","article_modified_time":"2024-09-03T10:14:07+00:00","og_image":[{"width":1280,"height":669,"url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/Excalidraw-cover.png","type":"image\/png"}],"author":"TheZal","twitter_card":"summary_large_image","twitter_creator":"@CodemotionIT","twitter_site":"@CodemotionIT","twitter_misc":{"Written by":"TheZal","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/excalidraw-diagrams-set-in-stone\/#article","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/excalidraw-diagrams-set-in-stone\/"},"author":{"name":"TheZal","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/f3f099160f0d8f2f80c5e4f3c8d53503"},"headline":"Excalidraw: Diagrams Set in Stone","datePublished":"2024-07-09T09:08:26+00:00","dateModified":"2024-09-03T10:14:07+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/excalidraw-diagrams-set-in-stone\/"},"wordCount":564,"publisher":{"@id":"https:\/\/www.codemotion.com\/magazine\/#organization"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/excalidraw-diagrams-set-in-stone\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/Excalidraw-cover.png","keywords":["excalidraw","open source tools"],"articleSection":["Frontend"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/excalidraw-diagrams-set-in-stone\/","url":"https:\/\/www.codemotion.com\/magazine\/frontend\/excalidraw-diagrams-set-in-stone\/","name":"Excalidraw: A Complete Introduction and Review - Codemotion","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/excalidraw-diagrams-set-in-stone\/#primaryimage"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/excalidraw-diagrams-set-in-stone\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/Excalidraw-cover.png","datePublished":"2024-07-09T09:08:26+00:00","dateModified":"2024-09-03T10:14:07+00:00","description":"From the idea to the shared drawing with the whole team, through open source: today we explore Excalidraw. Read on!","breadcrumb":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/excalidraw-diagrams-set-in-stone\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codemotion.com\/magazine\/frontend\/excalidraw-diagrams-set-in-stone\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/excalidraw-diagrams-set-in-stone\/#primaryimage","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/Excalidraw-cover.png","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/Excalidraw-cover.png","width":1280,"height":669,"caption":"excalidraw codemotion magazine"},{"@type":"BreadcrumbList","@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/excalidraw-diagrams-set-in-stone\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codemotion.com\/magazine\/"},{"@type":"ListItem","position":2,"name":"Frontend","item":"https:\/\/www.codemotion.com\/magazine\/frontend\/"},{"@type":"ListItem","position":3,"name":"Excalidraw: Diagrams Set in Stone"}]},{"@type":"WebSite","@id":"https:\/\/www.codemotion.com\/magazine\/#website","url":"https:\/\/www.codemotion.com\/magazine\/","name":"Codemotion Magazine","description":"We code the future. Together","publisher":{"@id":"https:\/\/www.codemotion.com\/magazine\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.codemotion.com\/magazine\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.codemotion.com\/magazine\/#organization","name":"Codemotion","url":"https:\/\/www.codemotion.com\/magazine\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png","width":225,"height":225,"caption":"Codemotion"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Codemotion.Italy\/","https:\/\/x.com\/CodemotionIT"]},{"@type":"Person","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/f3f099160f0d8f2f80c5e4f3c8d53503","name":"TheZal","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/image\/","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/01\/avatar-100x100.png","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/01\/avatar-100x100.png","caption":"TheZal"},"description":"Hello there! My name is Riccardo (aka TheZal), a passionate software engineer who loves to combine his passion for code with his love for fantasy realms like Dungeons and Dragons, Harry Potter, Star Wars, LOTR, etc., etc. I'm really into studying and exploring new technologies (with a lot of love for Open Source). I'm also a co-owner of a 12-year-old dachshund called Poldo, who is the mascot of my blog!","sameAs":["http:\/\/www.thezal.dev"],"url":"https:\/\/www.codemotion.com\/magazine\/author\/thezal\/"}]}},"featured_image_src":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/Excalidraw-cover-600x400.png","featured_image_src_square":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/Excalidraw-cover-600x600.png","author_info":{"display_name":"TheZal","author_link":"https:\/\/www.codemotion.com\/magazine\/author\/thezal\/"},"uagb_featured_image_src":{"full":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/Excalidraw-cover.png",1280,669,false],"thumbnail":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/Excalidraw-cover-150x150.png",150,150,true],"medium":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/Excalidraw-cover-300x157.png",300,157,true],"medium_large":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/Excalidraw-cover-768x401.png",768,401,true],"large":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/Excalidraw-cover-1024x535.png",1024,535,true],"1536x1536":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/Excalidraw-cover.png",1280,669,false],"2048x2048":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/Excalidraw-cover.png",1280,669,false],"small-home-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/Excalidraw-cover-100x100.png",100,100,true],"sidebar-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/Excalidraw-cover-180x128.png",180,128,true],"genesis-singular-images":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/Excalidraw-cover-896x504.png",896,504,true],"archive-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/Excalidraw-cover-400x225.png",400,225,true],"gb-block-post-grid-landscape":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/Excalidraw-cover-600x400.png",600,400,true],"gb-block-post-grid-square":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/Excalidraw-cover-600x600.png",600,600,true]},"uagb_author_info":{"display_name":"TheZal","author_link":"https:\/\/www.codemotion.com\/magazine\/author\/thezal\/"},"uagb_comment_info":0,"uagb_excerpt":"&#8220;Anyone who uses this tool will be rightfully King of Flowcharts&#8221; These are the words engraved under the golden hilt of Excalidraw, the Open Source project I&#8217;ll talk about today. Welcome to OpenDev Explorer, my column dedicated to exploring the Open Source world with a nod to developer experience. I am Riccardo (aka TheZal) and&#8230;&hellip;","lang":"en","_links":{"self":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/28616","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/users\/193"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/comments?post=28616"}],"version-history":[{"count":3,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/28616\/revisions"}],"predecessor-version":[{"id":28620,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/28616\/revisions\/28620"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/media\/28520"}],"wp:attachment":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/media?parent=28616"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/categories?post=28616"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/tags?post=28616"},{"taxonomy":"collections","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/collections?post=28616"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}