<!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.d10d421a425d36dfed424f03b2de2dcaf0fc3174cfb2456cb41551022bacd7f4.cssintegrity="sha256-0Q1CGkJdNt/tQk8Dst4tyvD8MXTPskVstBVRAius1/Q="><scriptdefertype=text/javascriptid=script-bundlesrc=/congo/js/main.bundle.min.f29ffdffd9ab4cc95250c3c7196b2d5dae8ee6ef0a4139451073f90183ae7e31.jsintegrity="sha256-8p/9/9mrTMlSUMPHGWstXa6O5u8KQTlFEHP5AYOufjE="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.06099a0611982ff1f25cea2ad7da9ec3f74e04cfc89c8bf4f8691368f6ba1915daf751f0d7557edd24e676e930b5ee124191cf22356d5eabd5f86543cc7f9f00.jsintegrity="sha512-BgmaBhGYL/HyXOoq19qew/dOBM/InIv0+GkTaPa6GRXa91Hw11V+3STmdukwte4SQZHPIjVtXqvV+GVDzH+fAA=="></script></head><bodyclass="flex flex-col h-screen px-6 m-auto text-lg leading-7 max-w-7xl bg-neutral text-neutral-900 dark:bg-neutral-800 dark:text-neutral sm:px-14 md:px-24 lg:px-32"><divid=the-topclass="absolute flex self-center"><aclass="px-3 py-1 text-sm -translate-y-8 rounded-b-lg bg-primary-200 focus:translate-y-0 dark:bg-neutral-600"href=#main-content><spanclass="font-bold pe-2 text-primary-600 dark:text-primary-400">↓</span>Ir al contenido</a></div><headerclass="py-6 font-semibold text-neutral-900 dark:text-neutral print:hidden sm:py-10"><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 flex-col list-none 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="transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600"><spanclass="relative
<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
