Saltar al contenido
Anderson F. González
English
Volver al trabajo

CircuitBreve: un simulador de circuitos lógicos en el navegador

Escribes un circuito en un lenguaje propio, se compila al instante y se dibuja como esquema. Puedes alternar las entradas para ver cómo se propaga la señal, obtener la tabla de verdad y exportar el resultado.

Tipo
Proyecto abierto, en equipo de dos
Mi parte
La aplicación en React. 9 de los 14 commits1 son míos; el prototipo de escaneo de imágenes en Python lo subió otro colaborador.
Periodo
Mayo de 2026
Stack
React 19, TypeScript, Vite 7, Tailwind 4
Licencia
MIT

Probar la demoCódigo en GitHub

Qué hace

  • Un lenguaje propio (HDL) con módulos, compuertas, entradas, salidas y expresiones anidadas.
  • Compila mientras escribes, con 400 ms de espera.
  • Dibuja el esquema en SVG con zoom y arrastre. Al hacer clic en una entrada, la señal se propaga.
  • Genera la tabla de verdad de hasta 10 entradas (1.024 filas)2 y extrae las expresiones booleanas de las salidas.
  • Exporta a SVG, PNG a 3x y PDF.

Haz clic en A, B o Cin, o enfócalas y pulsa Enter o Espacio.

XORANDXORANDORA1B1Cin0Sum0Cout1

1 + 1 + 0 = 10 (en binario)

Tabla de verdad
ABCinSumCout
00000
00110
01010
01101
10010
10101
11001
11111
El mismo circuito de las capturas: dos medios sumadores y una compuerta OR. Activa las entradas y mira cómo se propaga la señal.
Pantalla de CircuitBreve en tema claro: editor de código a la izquierda y el esquema de un sumador completo a la derecha, con las entradas A, B y Cin activas.
Un sumador completo escrito con dos módulos de medio sumador, con las tres entradas activas.
Pestaña de tabla de verdad de CircuitBreve con las ocho combinaciones de entrada del sumador completo.
La tabla de verdad del mismo circuito, generada a partir del esquema.

Cómo está hecho

Todo ocurre en el navegador, sin servidor. El código está separado por etapas: un compilador (lexer, parser y constructor del grafo), un simulador, un motor de distribución por capas al estilo Sugiyama y los componentes de la interfaz. Son unas 4.500 líneas de TypeScript3.

Las únicas dependencias de ejecución son React, clsx, tailwind-merge y un paquete de íconos4. No hay librerías de grafos ni de circuitos: el parser, la simulación y la distribución del esquema son código del proyecto.

Límites

  • No tiene pruebas automáticas ni integración continua.
  • El escaneo de imagen a HDL es un prototipo.
  • El lenguaje exige que cada señal esté definida antes de usarla.

Fuentes de las cifras

  1. 1

    Autoría de los commits de CircuitBreve

    git log de Albonire/CircuitBreve (público) · 9 de octubre de 2026

    Fabian Gonzalez (mi usuario de git) 9, otro colaborador 4 (backend y una copia del frontend) e ImgBot 1: 14 en total.

    github.com/Albonire/CircuitBreve

  2. 2

    Capacidades declaradas de CircuitBreve

    README de Albonire/CircuitBreve (público)

    Tablas de verdad de hasta 10 entradas (1.024 filas) y exportación a SVG, PNG a 3x y PDF.

    github.com/Albonire/CircuitBreve

  3. 3

    Tamaño del código de CircuitBreve

    archivos .ts y .tsx de src/ en Albonire/CircuitBreve (público) · 9 de octubre de 2026

    4.544 líneas.

    github.com/Albonire/CircuitBreve

  4. 4

    Dependencias de ejecución de CircuitBreve

    package.json de Albonire/CircuitBreve (público)

    clsx, lucide-react, react, react-dom y tailwind-merge. Ninguna librería de grafos ni de circuitos.

    github.com/Albonire/CircuitBreve