Editor visual C4 para developers
Crea diagramas C4 que resisten la revisión.
Crea modelos conectados de Context, Container y Component en workspaces privados en la nube, y pasa entre arquitectura visual y código reutilizable.
Inicia sesión con Google para crear un workspace privado, compartirlo con las personas adecuadas y mantenerlo editable.
Modela una vez. Usa la vista que responde la pregunta y lleva la salida a la siguiente conversación.
Un modelo C4, en movimiento
Construye el modelo por capas.
Cada paso añade solo el detalle que necesita la siguiente conversación.
- 01
Empieza con la persona.
El primer nodo responde quién necesita el sistema y hace que la arquitectura sea legible fuera de la implementación.
- 02
Dibuja la relación.
Una conexión expresa por qué existe el sistema en este modelo, no solo una línea entre dos cajas.
- 03
Define el contexto.
Los sistemas externos siguen visibles sin confundirse con software que controla el equipo.
- 04
Abre el sistema controlado.
Aplicaciones, APIs y bases de datos entran al mismo modelo cuando la conversación necesita una vista Container.
03Lleva el modelo contigo
El diagrama no queda atrapado en el canvas.
Copia Mermaid o Structurizr DSL para el repositorio, o pega código C4 compatible en Fourlayer para convertirlo en un modelo editable. Exporta PNG o SVG cuando el trabajo necesite viajar por un documento, presentación o revisión.
- Mermaid para docs, wikis y pull requests.
- Structurizr DSL para un codebase con C4.
- Pega código C4 compatible para empezar desde un modelo existente.
- PNG y SVG cuando una imagen real es el artefacto correcto.
- Vistas Component cuando la conversación necesita detalle de implementación.
workspace "Storefront" { model { customer = person "Customer" storefront = softwareSystem "Storefront" customer -> storefront "Browses products" }}Del código a un modelo compartido
Mantén la arquitectura editable en cada entrega.
Fourlayer conecta el modelado C4, la salida compatible con código y la colaboración privada en un solo flujo.
Pega Mermaid o Structurizr DSL.
Empieza con un diagrama C4Context, C4Container o C4Component, o con un workspace Structurizr con vistas nombradas. Fourlayer convierte el texto compatible en un modelo editable y avisa cuando algo no se puede representar.
Guarda un workspace privado.
Crea workspaces con nombre en la nube, conserva descripción e icono del proyecto y comparte acceso con roles de owner, editor o viewer.
Revisa el nivel correcto.
Pasa entre vistas Context, Container y Component sobre un único modelo semántico y exporta Mermaid, Structurizr DSL, PNG o SVG para la siguiente revisión.
FAQ
Arquitectura, sin ruido. Algunas respuestas sobre Fourlayer.
01¿Qué es el modelo C4?
C4 describe la arquitectura en cuatro niveles: Context, Container, Component y Code. Fourlayer trabaja los tres primeros como vistas de un mismo modelo conectado.
El modelo C4 es una forma de describir la arquitectura de software en cuatro niveles de detalle, creada por Simon Brown. Cada nivel responde una pregunta distinta para una audiencia distinta. Context muestra el sistema con las personas y los sistemas externos que lo rodean. Container divide ese sistema en las aplicaciones, APIs y bases de datos que realmente lo ejecutan. Component abre un único container en sus partes internas. Code, el cuarto nivel, normalmente se deja al IDE en lugar de dibujarse a mano. La clave es que cada nivel es un zoom del mismo modelo, no un dibujo aparte, así que un cambio hecho una vez sigue siendo cierto en todos los lugares donde aparece. La mayoría de los diagramas de arquitectura no sobreviven a la revisión porque mezclan estos niveles en un solo canvas. Fourlayer los mantiene como vistas sobre un mismo modelo. La referencia definitiva es c4model.com.
02¿Cómo se convierte un diagrama C4 en código?
Exporta la vista activa como Mermaid o Structurizr DSL para docs y repositorios. También puedes pegar código C4 compatible y seguir editándolo en Fourlayer.
Fourlayer genera texto a partir del modelo que dibujas, y también lee texto de vuelta al modelo. Cada vista se exporta como Mermaid, para docs, wikis y pull requests donde el diagrama debe vivir junto al código que describe, o como Structurizr DSL, el formato para tratar la arquitectura como un archivo versionado en el repositorio. El texto generado refleja solo los elementos visibles en la vista activa, así que una exportación de Container no filtra detalle de Component. La dirección también se invierte: pega código C4 compatible en Fourlayer y se convierte en un modelo editable, no en una importación estática. Esto importa porque los diagramas de arquitectura suelen morir en el paso de exportación. La imagen se envía, la fuente se pierde y el siguiente cambio empieza de cero. Cuando el texto y el canvas son el mismo modelo, el diagrama sobrevive a la siguiente revisión.
03¿Qué vistas C4 soporta Fourlayer?
Context, Container y Component comparten un único modelo semántico. Los workspaces son privados por defecto, con acceso owner, editor y viewer.
Fourlayer soporta tres de los cuatro niveles de C4: Context, Container y Component. Los tres son vistas sobre un único modelo semántico, así que un sistema renombrado en Context queda renombrado en todas partes. Los elementos disponibles son personas, sistemas de software, sistemas externos, containers, bases de datos, componentes y las relaciones entre ellos, además de un límite de sistema editable opcional. Las vistas Deployment todavía no están implementadas; son el siguiente nivel C4 del roadmap. Tampoco lo están el cobro, la sincronización con GitHub, los enlaces públicos, la colaboración en tiempo real ni la exportación a PDF. Fourlayer está en beta pública gratuita, y eso sigue sin construirse en lugar de estar detrás de un plan. Lo que sí funciona es exportar a Mermaid, Structurizr DSL, PNG en 1x, 2x y 4x, y SVG, además de chequeos de salud de la arquitectura que enlazan directamente al campo que hay que corregir. Los workspaces son privados por defecto y requieren una cuenta de Google, con roles de owner, editor y viewer para compartir.
04¿Qué puedo exportar?
Exporta la vista activa como Mermaid, Structurizr DSL, PNG o SVG. El modelo sigue editable para el siguiente cambio.
Cada vista se exporta como texto o como imagen. En texto están Mermaid, que encaja en docs, wikis y pull requests donde GitHub y GitLab lo renderizan de forma nativa, y Structurizr DSL, que trata la arquitectura como un archivo versionado junto al código. Ambos reflejan solo los elementos visibles en la vista activa, así que una exportación de Container nunca filtra detalle de Component. En imagen están PNG a 1x, 2x y 4x, con fondo transparente opcional, y SVG cuando el diagrama debe mantenerse nítido a cualquier tamaño o editarse en una herramienta vectorial. Las exportaciones de imagen llevan una marca de agua mínima de Fourlayer durante la beta pública. Nada de esto es de ida sin vuelta: el código Mermaid o Structurizr compatible que pegues en Fourlayer vuelve a ser un modelo editable, así que el diagrama sobrevive al siguiente cambio en lugar de morir en la exportación.
Publicado hace poco
Qué ha cambiado.
La beta se mueve. Estos son los tres últimos cambios que notaría quien lee esta página.
Las etiquetas de relación se leen.
Ahora se colocan en conjunto en lugar de una a una, así que dos conexiones que cruzan la misma zona ya no se imprimen una encima de otra.
Las importaciones de Structurizr conservan sus vistas.
Los workspaces importados mantienen sus vistas nombradas, los sistemas externos y las bases de datos conservan su notación, y crear un workspace desde código pegado informa del progreso mientras trabaja.
Fidelidad al importar, y un canvas más rápido.
Los ámbitos de componentes, los límites C4 y las referencias jerárquicas sobreviven intactos a una importación. Las vistas del editor se cachean, las previsualizaciones se cargan en diferido y el ruteo de relaciones se aplaza, así que los diagramas grandes siguen respondiendo.
En qué estamos trabajando
Hacia dónde va Fourlayer.
Sin fechas. Estas son las piezas en marcha, y la beta decide su orden.
- En desarrollo
Soporte PlantUML.
Importar y exportar PlantUML junto a Mermaid y Structurizr DSL, para que un modelo pase entre los tres sin volver a dibujarlo.
- Siguiente
Vistas Deployment.
El cuarto nivel de C4, como vista sobre el mismo modelo semántico que ya sostiene Context, Container y Component.
- En evaluación
Enlaces de sólo lectura.
Enviar un modelo a alguien que todavía no tiene cuenta, sin aplastarlo antes en una imagen.
Beta pública de Fourlayer
Trae un sistema que ya necesitas explicar.
Construye una vista Context o Container, exporta el resultado y cuéntanos dónde el trabajo dejó de ser obvio. Ese feedback decide qué construye Fourlayer después.