<!doctype html><htmllang=es-MXdir=ltrclass=scroll-smoothdata-default-appearance=lightdata-auto-appearance=true><head><metacharset=utf-8><metaname=viewportcontent="width=device-width,initial-scale=1"><metaname=theme-colorcontent="rgb(255,255,255)"><title>Diagramas y diagramas de flujo · Congo</title>
<metaname=titlecontent="Diagramas y diagramas de flujo · Congo"><scripttype=text/javascriptsrc=/congo/js/appearance.min.022d0ebc3b46a335eb1c7ef79b7f2de143d7cd5156d433638592ef1ce5f8554e.jsintegrity="sha256-Ai0OvDtGozXrHH73m38t4UPXzVFW1DNjhZLvHOX4VU4="></script><linktype=text/cssrel=stylesheethref=/congo/css/main.bundle.min.33a669351b9f936b30a0fc74240c4bd296cb15c8b2b1e40ea9ee7b6658af735b.cssintegrity="sha256-M6ZpNRufk2swoPx0JAxL0pbLFciyseQOqe57Zlivc1s="><scriptdefertype=text/javascriptid=script-bundlesrc=/congo/js/main.bundle.min.fba363b244ec92c2d7b9de42d4cebd0b8994fd07279923c5929eb4dc3d055606.jsintegrity="sha256-+6NjskTsksLXud5C1M69C4mU/QcnmSPFkp603D0FVgY="data-copy=Copiardata-copied=Copiado></script><metaname=descriptioncontent="
"><linkrel=canonicalhref=https://jpanther.github.io/congo/es/samples/diagrams-flowcharts/><linkrel=apple-touch-iconsizes=180x180href=/congo/apple-touch-icon.png><linkrel=icontype=image/pngsizes=32x32href=/congo/favicon-32x32.png><linkrel=icontype=image/pngsizes=16x16href=/congo/favicon-16x16.png><linkrel=manifesthref=/congo/site.webmanifest><metaproperty="og:title"content="Diagramas y diagramas de flujo"><metaproperty="og:description"content="Guía para el uso de Mermaid en Congo"><metaproperty="og:type"content="article"><metaproperty="og:url"content="https://jpanther.github.io/congo/es/samples/diagrams-flowcharts/"><metaproperty="article:section"content="samples"><metaproperty="article:published_time"content="2019-03-06T00:00:00+00:00"><metaproperty="article:modified_time"content="2019-03-06T00:00:00+00:00"><metaname=twitter:cardcontent="summary"><metaname=twitter:titlecontent="Diagramas y diagramas de flujo"><metaname=twitter:descriptioncontent="Guía para el uso de Mermaid en Congo"><scripttype=application/ld+json>{"@context":"https://schema.org","@type":"Article","articleSection":"Páginas de ejemplo","name":"Diagramas y diagramas de flujo","headline":"Diagramas y diagramas de flujo","description":"Guía para el uso de Mermaid en Congo","abstract":"Es fácil agregar diagramas y diagramas de flujo a los artículos usando Mermaid.","inLanguage":"es-MX","url":"https:\/\/jpanther.github.io\/congo\/es\/samples\/diagrams-flowcharts\/","author":{"@type":"Person","name":"Congo"},"copyrightYear":"2019","dateCreated":"2019-03-06T00:00:00\u002b00:00","datePublished":"2019-03-06T00:00:00\u002b00:00","dateModified":"2019-03-06T00:00:00\u002b00:00","keywords":["mermaid","sample","diagram","shortcodes"],"mainEntityOfPage":"true","wordCount":"265"}</script><metaname=authorcontent="Congo"><linkhref=https://twitter.com/rel=me><linkhref=https://facebook.com/rel=me><linkhref=https://linkedin.com/rel=me><linkhref=https://youtube.com/rel=me><scriptdefertype=text/javascriptsrc=/congo/js/mermaid.bundle.b8d4a335514c2afdcfb38891a8ab860c2a4984b4dd5c1177893577737c1f5c88c3323506186e836c1bb5e3a7258e9892e53c2fd75cba5429c29d34545dca3f58.jsintegrity="sha512-uNSjNVFMKv3Ps4iRqKuGDCpJhLTdXBF3iTV3c3wfXIjDMjUGGG6DbBu146cljpiS5Twv11y6VCnCnTRUXco/WA=="></script></head><bodyclass="m-auto flex h-screen max-w-7xl flex-col bg-neutral px-6 text-lg leading-7 text-neutral-900 sm:px-14 md:px-24 lg:px-32 dark:bg-neutral-800 dark:text-neutral"><divid=the-topclass="absolute flex self-center"><aclass="-translate-y-8 rounded-b-lg bg-primary-200 px-3 py-1 text-sm focus:translate-y-0 dark:bg-neutral-600"href=#main-content><spanclass="pe-2 font-bold text-primary-600 dark:text-primary-400">↓</span>Ir al contenido</a></div><headerclass="py-6 font-semibold text-neutral-900 print:hidden sm:py-10 dark:text-neutral"><navclass="flex items-start justify-between sm:items-center"><divclass="flex flex-row items-center"><aclass="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2"rel=mehref=/congo/es/>Congo</a></div><ulclass="flex list-none flex-col text-end sm:flex-row"><liclass="group mb-1 sm:mb-0 sm:me-7 sm:last:me-0.5"><ahref=/congo/docstitle><spanclass="decoration-primary-500 group-hover:underline group-hover:decoration-2 group-hover:underline-offset-2">Docs</span></a></li><liclass="group mb-1 sm:mb-0 sm:me-7 sm:last:me-0.5"><ahref=/congo/es/samples/title="Páginas de ejemplo"><spanclass="decoration-primary-500 group-hover:underline group-hover:decoration-2 group-hover:underline-offset-2">Ejemplos</span></a></li><liclass="group mb-1 sm:mb-0 sm:me-7 sm:last:me-0.5"><ahref=/congo/es/users/title=Usuarios><spanclass="decoration-primary-500 group-hover:underline group-hover:decoration-2 group-hover:underline-offset-2">Usuarios</span></a></li><liclass="group mb-1 sm:mb-0 sm:me-7 sm:last:me-0.5"><ahref=https://github.com/jpanther/congotitletarget=_blank><spanclass="group-dark:hover:text-primary-400 transition-colors group-hover:text-primary-600"><spanclass="iconrel
<ahref=https://jpanther.github.io/congo/docs/shortcodes/#mermaid>shortcode Mermaid</a> para obtener más detalles.</p><p>Los ejemplos a continuación son una pequeña selección tomada de la
<ahref=https://mermaid-js.github.io/mermaid/target=_blankrel=noreferrer>documentación oficial de Mermaid</a>. También puedes ver el
<ahref=https://raw.githubusercontent.com/jpanther/congo/dev/exampleSite/content/samples/diagrams-flowcharts/index.es.mdtarget=_blankrel=noreferrer>código fuente de la página</a> en GitHub para ver la sintaxis.</p><h2id=diagrama-de-flujoclass="relative group">Diagrama de flujo <spanclass="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100"><aclass="group-hover:text-primary-300 dark:group-hover:text-neutral-700"style=text-decoration-line:none!importanthref=#diagrama-de-flujoaria-label=Ancla>#</a></span></h2><divclass=mermaidalign=center>graph TD
