{"id":28691,"date":"2024-07-16T11:50:00","date_gmt":"2024-07-16T09:50:00","guid":{"rendered":"https:\/\/www.codemotion.com\/magazine\/?p=28691"},"modified":"2024-07-16T11:51:27","modified_gmt":"2024-07-16T09:51:27","slug":"excalidraw-una-introduccion-completa-y-resena","status":"publish","type":"post","link":"https:\/\/www.codemotion.com\/magazine\/es\/open-source-es\/excalidraw-una-introduccion-completa-y-resena\/","title":{"rendered":"Excalidraw: Diagramas forjados en piedra"},"content":{"rendered":"\n<p><em>\u201cCualquiera que use esta herramienta ser\u00e1, con raz\u00f3n, el Rey de los Diagramas de Flujo\u201d. Estas son las palabras grabadas bajo la empu\u00f1adura dorada de <strong>Excalidraw<\/strong>, el proyecto de c\u00f3digo abierto del que hablar\u00e9 hoy.<\/em><\/p>\n\n\n\n<p>Bienvenidos a OpenDev Explorer, mi columna dedicada a explorar <a href=\"https:\/\/www.codemotion.com\/magazine\/dev-life\/open-source-month-5-tools-to-definitely-try\/\" target=\"_blank\" aria-label=\"el mundo del c\u00f3digo abierto  (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\">el mundo del c\u00f3digo abierto <\/a>con un gui\u00f1o a la experiencia del desarrollador. Soy Riccardo (tambi\u00e9n conocido como TheZal) y hoy hablar\u00e9 de Excalidraw, una herramienta de c\u00f3digo abierto para crear diagramas de flujo, as\u00ed como dibujos a mano alzada para cualquiera que necesite plasmar sus ideas en papel digital.<\/p>\n\n\n\n<p><strong>Visi\u00f3n general<\/strong><\/p>\n\n\n\n<p>Excalidraw es una tool online de dibujo de c\u00f3digo abierto que permite crear bocetos y diagramas de manera f\u00e1cil e intuitiva.<\/p>\n\n\n\n<p>Su interfaz de usuario minimalista hace que dibujar sea tan intuitivo como en papel, lo cual es ideal para brainstorming, diagramas de flujo y wireframing. Adem\u00e1s, <strong>Excalidraw permite la colaboraci\u00f3n <\/strong>en tiempo real, permitiendo a varios usuarios trabajar juntos en un mismo proyecto simult\u00e1neamente.<\/p>\n\n\n\n<p>Es apreciada por su capacidad de crear dibujos con apariencia de hechos a mano y ofrece opciones de exportaci\u00f3n en varios formatos, como PNG y SVG, lo que la convierte en una herramienta valiosa para todos.<\/p>\n\n\n\n<p><strong>User Manual<\/strong><\/p>\n\n\n\n<p><strong>Instalaci\u00f3n<\/strong><\/p>\n\n\n\n<p>Instalar Excalidraw es muy sencillo, ya que est\u00e1 disponible a trav\u00e9s de varios gestores de paquetes como npm y yarn, y se puede instalar usando uno de los siguientes comandos:<\/p>\n\n\n\n<p>Usando npm:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>npm install react react-dom @excalidraw\/excalidraw<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Usando yarn:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>yarn add react react-dom @excalidraw\/excalidraw<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p><strong>Uso<\/strong><\/p>\n\n\n\n<p>Usar Excalidraw tambi\u00e9n es muy simple, ya que solo necesitas importar la biblioteca en tu componente y crear el objeto directamente desde la biblioteca. Aqu\u00ed tienes un ejemplo:<\/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}<\/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>Experiencia de desarrollador<\/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-7-1024x651.png\" alt=\"\" class=\"wp-image-28692\" srcset=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/image-7-1024x651.png 1024w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/image-7-300x191.png 300w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/image-7-768x489.png 768w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/image-7.png 1536w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Excalidraw es muy apreciado por los devs por la facilidad con la que se puede implementar en sus proyectos.<\/p>\n\n\n\n<p>Al ser open-source, ofrece una gran flexibilidad y posibilidades de personalizaci\u00f3n, permitiendo a los desarrolladores adaptarlo a las necesidades espec\u00edficas de su software. Adem\u00e1s, su API est\u00e1 bien documentada y permite una f\u00e1cil integraci\u00f3n con otras aplicaciones y plataformas.<\/p>\n\n\n\n<p>El lightweight code y la arquitectura modular contribuyen a una f\u00e1cil mantenimiento y escalabilidad, lo que lo convierte en una opci\u00f3n confiable para proyectos de cualquier tama\u00f1o.<\/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-8.png\" alt=\"\" class=\"wp-image-28693\" srcset=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/image-8.png 800w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/image-8-300x225.png 300w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/image-8-768x576.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p>La ventaja adicional de Excalidraw se encuentra en la posibilidad de colaboraci\u00f3n en tiempo real entre equipos, permitiendo que m\u00faltiples usuarios trabajen simult\u00e1neamente en el mismo dibujo, facilitando el intercambio de ideas y mejorando la productividad del equipo.<\/p>\n\n\n\n<p>De hecho, para crear una sesi\u00f3n colaborativa en Excalidraw, solo necesitas iniciar una sesi\u00f3n desde el bot\u00f3n &#8220;Compartir&#8221; y enviar el enlace generado. Todos los participantes podr\u00e1n ver y editar el dibujo en tiempo real.<\/p>\n\n\n\n<p><strong>Comparaci\u00f3n con el Status Quo<\/strong><\/p>\n\n\n\n<p>Excalidraw se destaca entre sus competidores como Draw.io gracias a su simplicidad e inmediatez. Esta herramienta de dibujo en l\u00ednea ofrece una interfaz intuitiva que permite crear diagramas y bocetos con facilidad, sin una curva de aprendizaje pronunciada.<\/p>\n\n\n\n<p>Su naturaleza de c\u00f3digo abierto garantiza flexibilidad e innovaci\u00f3n continua por parte de la comunidad, que la aprecia particularmente y la convierte casi en un proyecto \u201cimpulsado por la comunidad\u201d.<\/p>\n\n\n\n<p>Adem\u00e1s, Excalidraw sobresale en la colaboraci\u00f3n en tiempo real, permitiendo que m\u00faltiples usuarios trabajen simult\u00e1neamente en un proyecto con actualizaciones inmediatas, algo que no es posible, por ejemplo, con Draw.io.<\/p>\n\n\n\n<p>A diferencia de herramientas m\u00e1s complejas, Excalidraw se enfoca en lo esencial y la rapidez, lo que la hace ideal para lluvias de ideas y prototipado r\u00e1pido.<\/p>\n\n\n\n<p><strong>Reflexiones finales<\/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-9.png\" alt=\"\" class=\"wp-image-28694\" srcset=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/image-9.png 870w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/image-9-300x170.png 300w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/image-9-768x436.png 768w\" sizes=\"auto, (max-width: 870px) 100vw, 870px\" \/><\/figure>\n\n\n\n<p>Entonces, Excalidraw es muy f\u00e1cil de implementar, muy sencillo de usar y adem\u00e1s cuenta con funciones integradas de colaboraci\u00f3n en tiempo real, lo que la convierte en la herramienta perfecta para la creaci\u00f3n de proyectos y prototipos.<\/p>\n\n\n\n<p>Adem\u00e1s, se valora por su capacidad para crear dibujos con apariencia de hechos a mano y ofrece opciones de exportaci\u00f3n en varios formatos, como PNG y SVG, manteniendo los archivos editables, lo que la convierte en una herramienta valiosa para todos.<\/p>\n\n\n\n<p><a href=\"https:\/\/www.codemotion.com\/magazine\/frontend\/css-is-cool-explore-these-5-repositories\/\" target=\"_blank\" rel=\"noreferrer noopener\"><\/a><a href=\"https:\/\/www.codemotion.com\/magazine\/frontend\/css-is-cool-explore-these-5-repositories\/\" target=\"_blank\" rel=\"noreferrer noopener\"><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u201cCualquiera que use esta herramienta ser\u00e1, con raz\u00f3n, el Rey de los Diagramas de Flujo\u201d. Estas son las palabras grabadas bajo la empu\u00f1adura dorada de Excalidraw, el proyecto de c\u00f3digo abierto del que hablar\u00e9 hoy. Bienvenidos a OpenDev Explorer, mi columna dedicada a explorar el mundo del c\u00f3digo abierto con un gui\u00f1o a la experiencia&#8230; <a class=\"more-link\" href=\"https:\/\/www.codemotion.com\/magazine\/es\/open-source-es\/excalidraw-una-introduccion-completa-y-resena\/\">Read more<\/a><\/p>\n","protected":false},"author":64,"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":[10654],"tags":[10756],"collections":[],"class_list":{"0":"post-28691","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-open-source-es","8":"tag-codigo-abierto","9":"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: Una introducci\u00f3n completa y rese\u00f1a - Codemotion<\/title>\n<meta name=\"description\" content=\"Desde la idea hasta el dibujo compartido con todo el equipo, a trav\u00e9s del c\u00f3digo abierto: hoy exploramos Excalidraw. \u00a1Sigue leyendo!\" \/>\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\/es\/open-source-es\/excalidraw-una-introduccion-completa-y-resena\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Excalidraw: Diagramas forjados en piedra\" \/>\n<meta property=\"og:description\" content=\"Desde la idea hasta el dibujo compartido con todo el equipo, a trav\u00e9s del c\u00f3digo abierto: hoy exploramos Excalidraw. \u00a1Sigue leyendo!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codemotion.com\/magazine\/es\/open-source-es\/excalidraw-una-introduccion-completa-y-resena\/\" \/>\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-16T09:50:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-07-16T09:51:27+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=\"Codemotion\" \/>\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=\"Codemotion\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/es\/open-source-es\/excalidraw-una-introduccion-completa-y-resena\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/es\/open-source-es\/excalidraw-una-introduccion-completa-y-resena\/\"},\"author\":{\"name\":\"Codemotion\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/201bb98b02412383686cced7521b861c\"},\"headline\":\"Excalidraw: Diagramas forjados en piedra\",\"datePublished\":\"2024-07-16T09:50:00+00:00\",\"dateModified\":\"2024-07-16T09:51:27+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/es\/open-source-es\/excalidraw-una-introduccion-completa-y-resena\/\"},\"wordCount\":692,\"publisher\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/es\/open-source-es\/excalidraw-una-introduccion-completa-y-resena\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/Excalidraw-cover.png\",\"keywords\":[\"C\u00f3digo abierto\"],\"articleSection\":[\"Open source\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/es\/open-source-es\/excalidraw-una-introduccion-completa-y-resena\/\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/es\/open-source-es\/excalidraw-una-introduccion-completa-y-resena\/\",\"name\":\"Excalidraw: Una introducci\u00f3n completa y rese\u00f1a - Codemotion\",\"isPartOf\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/es\/open-source-es\/excalidraw-una-introduccion-completa-y-resena\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/es\/open-source-es\/excalidraw-una-introduccion-completa-y-resena\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/Excalidraw-cover.png\",\"datePublished\":\"2024-07-16T09:50:00+00:00\",\"dateModified\":\"2024-07-16T09:51:27+00:00\",\"description\":\"Desde la idea hasta el dibujo compartido con todo el equipo, a trav\u00e9s del c\u00f3digo abierto: hoy exploramos Excalidraw. \u00a1Sigue leyendo!\",\"breadcrumb\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/es\/open-source-es\/excalidraw-una-introduccion-completa-y-resena\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.codemotion.com\/magazine\/es\/open-source-es\/excalidraw-una-introduccion-completa-y-resena\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/es\/open-source-es\/excalidraw-una-introduccion-completa-y-resena\/#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\/es\/open-source-es\/excalidraw-una-introduccion-completa-y-resena\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.codemotion.com\/magazine\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Open source\",\"item\":\"https:\/\/www.codemotion.com\/magazine\/es\/open-source-es\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Excalidraw: Diagramas forjados en piedra\"}]},{\"@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\/201bb98b02412383686cced7521b861c\",\"name\":\"Codemotion\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/cropped-codemotionlogo-150x150.png\",\"contentUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/cropped-codemotionlogo-150x150.png\",\"caption\":\"Codemotion\"},\"description\":\"Articles wirtten by the Codemotion staff. Tech news, inspiration, latest treends in software development and more.\",\"sameAs\":[\"https:\/\/x.com\/CodemotionIT\"],\"url\":\"https:\/\/www.codemotion.com\/magazine\/author\/codemotion-2\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Excalidraw: Una introducci\u00f3n completa y rese\u00f1a - Codemotion","description":"Desde la idea hasta el dibujo compartido con todo el equipo, a trav\u00e9s del c\u00f3digo abierto: hoy exploramos Excalidraw. \u00a1Sigue leyendo!","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\/es\/open-source-es\/excalidraw-una-introduccion-completa-y-resena\/","og_locale":"en_US","og_type":"article","og_title":"Excalidraw: Diagramas forjados en piedra","og_description":"Desde la idea hasta el dibujo compartido con todo el equipo, a trav\u00e9s del c\u00f3digo abierto: hoy exploramos Excalidraw. \u00a1Sigue leyendo!","og_url":"https:\/\/www.codemotion.com\/magazine\/es\/open-source-es\/excalidraw-una-introduccion-completa-y-resena\/","og_site_name":"Codemotion Magazine","article_publisher":"https:\/\/www.facebook.com\/Codemotion.Italy\/","article_published_time":"2024-07-16T09:50:00+00:00","article_modified_time":"2024-07-16T09:51:27+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":"Codemotion","twitter_card":"summary_large_image","twitter_creator":"@CodemotionIT","twitter_site":"@CodemotionIT","twitter_misc":{"Written by":"Codemotion","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codemotion.com\/magazine\/es\/open-source-es\/excalidraw-una-introduccion-completa-y-resena\/#article","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/es\/open-source-es\/excalidraw-una-introduccion-completa-y-resena\/"},"author":{"name":"Codemotion","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/201bb98b02412383686cced7521b861c"},"headline":"Excalidraw: Diagramas forjados en piedra","datePublished":"2024-07-16T09:50:00+00:00","dateModified":"2024-07-16T09:51:27+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/es\/open-source-es\/excalidraw-una-introduccion-completa-y-resena\/"},"wordCount":692,"publisher":{"@id":"https:\/\/www.codemotion.com\/magazine\/#organization"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/es\/open-source-es\/excalidraw-una-introduccion-completa-y-resena\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/Excalidraw-cover.png","keywords":["C\u00f3digo abierto"],"articleSection":["Open source"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.codemotion.com\/magazine\/es\/open-source-es\/excalidraw-una-introduccion-completa-y-resena\/","url":"https:\/\/www.codemotion.com\/magazine\/es\/open-source-es\/excalidraw-una-introduccion-completa-y-resena\/","name":"Excalidraw: Una introducci\u00f3n completa y rese\u00f1a - Codemotion","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/es\/open-source-es\/excalidraw-una-introduccion-completa-y-resena\/#primaryimage"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/es\/open-source-es\/excalidraw-una-introduccion-completa-y-resena\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/Excalidraw-cover.png","datePublished":"2024-07-16T09:50:00+00:00","dateModified":"2024-07-16T09:51:27+00:00","description":"Desde la idea hasta el dibujo compartido con todo el equipo, a trav\u00e9s del c\u00f3digo abierto: hoy exploramos Excalidraw. \u00a1Sigue leyendo!","breadcrumb":{"@id":"https:\/\/www.codemotion.com\/magazine\/es\/open-source-es\/excalidraw-una-introduccion-completa-y-resena\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codemotion.com\/magazine\/es\/open-source-es\/excalidraw-una-introduccion-completa-y-resena\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/es\/open-source-es\/excalidraw-una-introduccion-completa-y-resena\/#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\/es\/open-source-es\/excalidraw-una-introduccion-completa-y-resena\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codemotion.com\/magazine\/"},{"@type":"ListItem","position":2,"name":"Open source","item":"https:\/\/www.codemotion.com\/magazine\/es\/open-source-es\/"},{"@type":"ListItem","position":3,"name":"Excalidraw: Diagramas forjados en piedra"}]},{"@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\/201bb98b02412383686cced7521b861c","name":"Codemotion","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/image\/","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/cropped-codemotionlogo-150x150.png","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/cropped-codemotionlogo-150x150.png","caption":"Codemotion"},"description":"Articles wirtten by the Codemotion staff. Tech news, inspiration, latest treends in software development and more.","sameAs":["https:\/\/x.com\/CodemotionIT"],"url":"https:\/\/www.codemotion.com\/magazine\/author\/codemotion-2\/"}]}},"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":"Codemotion","author_link":"https:\/\/www.codemotion.com\/magazine\/author\/codemotion-2\/"},"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":"Codemotion","author_link":"https:\/\/www.codemotion.com\/magazine\/author\/codemotion-2\/"},"uagb_comment_info":0,"uagb_excerpt":"\u201cCualquiera que use esta herramienta ser\u00e1, con raz\u00f3n, el Rey de los Diagramas de Flujo\u201d. Estas son las palabras grabadas bajo la empu\u00f1adura dorada de Excalidraw, el proyecto de c\u00f3digo abierto del que hablar\u00e9 hoy. Bienvenidos a OpenDev Explorer, mi columna dedicada a explorar el mundo del c\u00f3digo abierto con un gui\u00f1o a la experiencia&#8230;&hellip;","lang":"es","_links":{"self":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/28691","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\/64"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/comments?post=28691"}],"version-history":[{"count":2,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/28691\/revisions"}],"predecessor-version":[{"id":28696,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/28691\/revisions\/28696"}],"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=28691"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/categories?post=28691"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/tags?post=28691"},{"taxonomy":"collections","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/collections?post=28691"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}