Tipogramas de google en github

Tipogramas (diagramas tipográficos) es un formato de imagen ligero ( text/typogram) útil para definir diagramas simples en la documentación técnica. Al igual que Markdown, los tipogramas están fuertemente inspirados en las convenciones preexistentes que se encuentran en los diagramas ASCII . Se define un pequeño conjunto de primitivas y reglas para conectarlas, que puede usar para construir diagramas más grandes .

Contenido

 

https://github.com/google/tipogramas/

 

Descripción general

Tipogramas (diagramas tipográficos) es un formato de imagen ligero ( text/typogram) útil para definir diagramas simples en la documentación técnica.

Al igual que Markdown, los tipogramas están fuertemente inspirados en las convenciones preexistentes que se encuentran en los diagramas ASCII . Se define un pequeño conjunto de primitivas y reglas para conectarlas, que puede usar para construir diagramas más grandes .

Los tipogramas optimizan la editabilidad y la portabilidad (p. ej., el texto sin formato es fácil de mantener, cambiar, almacenar y transmitir), a costa de la expresividad (p. ej., SVG es más expresivo) y la ergonomía (p. ej., las herramientas de nivel superior producen diagramas más rápido).

Una comparación con trabajos relacionados está disponible a continuación.

Hay un renderizador JS disponible que le permite usarlo en los navegadores.

Instalación

Para comenzar, la forma más fácil de usar tipografías es enlazar desde nuestro CDN:


<body>
  <script src="https://google.github.io/typograms/typograms.js"></script>
  <script type="text/typogram">
+----+
|    |---> My first diagram!
+----+
  </script>
</body>
      

Desde allí, puede descargar la biblioteca directamente para servirse usted mismo. También puede usarlo como una herramienta de línea de comandos o una biblioteca de nodos: https://github.com/google/typograms

Primitivos

Los tipogramas se componen de primitivas y conectores que las combinan: tubos ( | - _ \ / : ~), puntos flechas ( > ^ * o # v < ) y conectores ( + . -).

Al unirlos, puede formar muchos diagramas diferentes .

Tubería

+–+-++-||||-+-|/\\/+–++–++\/\/||||+–+-++-|-+-+–++–+\//\/\+++/\.–.-..-||||-.-|/\\/.–..–..\/\/||||’–‘-»-|-‘-‘–»–‘\//\/\’../\______________\/|||||__|_||_|_|_/__\\__/\//\/\\_/||/\+~~+~++~::::~+~:::::+~~+~++~:~+~/\/\\/\/-..–..-..-.-.’–»-»-»-‘

Puntos

o-o*-o#-o|||\/\/\/\/\/\/o-**-*#-*o*#oooo****####o-#*-##-#|||/\/\/\/\/\/\

flechas

|^^^/\-><-v|/\vv->||<-->oo<-->**<-->##<--_*o#^^^^^||||||||||vvvvv-_*o#----\||/^||^\/^^v||v/||\vv/\----

Texto

Anythingbetweendoublequotesisrenderedastext!

Ejemplos

Protocolos

+-----++-----+|A||B|+--+--++--+--+|foo||----------------->||hello||----------------->|--+|world||promptstheuser|<-----------------|--+||--+----+--

se burla

.------------------------.|.----------------------.|||https://example.com|||'----------------------'||______________________|||||||Welcome!||||||||||||.----------------.|||||username|||||'----------------'||||.----------------.|||||*******|||||'----------------'||||||||.----------------.|||||Sign-up|||||'----------------'|||||||+----------------------+|.------------------------.

Arquitectura

Componentes

SenderMailServerReceiver_____.---------.SMTP|=====|POP.---------.||-------------->||<--------------|||Alice||||Bob|+---------+|o|+---------+///_____\\\|_____|///_____\\\'-------------''-------------'+---------------------+|To:bob@bar.com||From:alice@foo.com||Body:Hi!|+---------------------+

Capas

.---..---..---..---..---..---.'---''---''---''---''---''---'||||||vv|v|v.------------.|.-----------.|.-----.|Filesystem|||Scheduler|||MMU|'------------'|'-----------'|'-----'||||v||v.----.||.~~~~~~~~~.|IO|<----'|:Network:'----'|'~~~~~~~~~'|||vvv.---------------------------------------.|HAL|'---------------------------------------'

Mesas

+-----+---------+---------+~~~~~~+----------+|ID|First|Last::Lang|+-----+---------+---------+~~~~~~+----------+|1|Joe|Doe::en-US|+-----+---------+---------+~~~~~~+----------+|2|Rick|Russel::en-US|+-----+---------+---------+~~~~~~+----------+::::::::::::+-----+---------+---------+~~~~~~+----------+|999|Anna|Merkle::pt-BR|+-----+---------+---------+~~~~~~+----------+

diagramas de flujo

.-------.+|START|/\'---+---'/\+-+---------+-+___________|.-----./\||COMPLEX||/\v|END|<---+CHOICE+--->||||->+PREPARATION+->X+-------+'-----'\/||PROCESS||\___________//INPUT/\/+-+---------+-++-------+\/|+v^+---------++----+----+|PROCESS|------------>|PROCESS|<-----x+---------++---------+

Árboles

+++--1.--1/1/\|+--+.--++/\+---+---+|+--2|'--2/\2++||--+--++/\/\+-+-++-+-+|+--3|.--3\/3/\/\||||+--+'--++12341234+--4'--4\4Linux+--Android+--Debian|+--Ubuntu||+--Lubuntu||+--Kubuntu||+--Xubuntu||`--Xubuntu|`--Mint+--Centos`--FedoraXY/\/\AY->XC/\/\BCAB

formas

Formas grandes

+---------+++------+.-----.+~~~~~++----++----+\//\\\||::/\/\\//\\\||::/\||\//\\\||::\/||\//\\\||::\/\/++---------++------+'-----'+~~~~~++----++----+

Formas pequeñas

_________.---.__+-++-+/\/\\/+\//\+-++-++-+||++||_//\\\__//__\\//_\+/\+-+/_/\_\'---'++|__||_|+-++-++----+

Superposiciones e intersecciones

.---..---..---..---..---.||||||||||.--+---+--..--+---+--..--||--..--++--..----|---.||||||||||||||'--+---+--''--+---+--''--||--''--++--''--|-----'||||||||||'---''---''---''---''---'

Cuadrículas

grandes cuadrículas

+----++----+/\/\.-----+-----+-----.++----++----+||||.-----+-----+-----+-----+\/\/\||||/////+----++----+++-----+-----+-----++-----+-----+-----+-----+/\/\/||||/////++----++----+||||+-----+-----+-----+-----+\/\/\+-----+-----+-----+/////+----++----++||||+-----+-----+-----+-----+\/\/||||/////+----++----+'-----+-----+-----''-----+-----+-----+-----+

Rejillas pequeñas

______.---+---+---+---+---..---+---+---+---..---..---.___/\___/\||||||/\/\/\/\/|+---+|/\___/\___/+---+---+---+---+---++---+---+---+---++---++---+\___/\___/\||||||\/\/\/\/\|+---+|/\___/\___/+---+---+---+---+---++---+---+---+---++---++---+\___/\___/\||||||/\/\/\/\/|+---+|\___/\___/'---+---+---+---+---''---+---+---+---''---''---'

cuadrículas de puntos

ooooo*****o***oooo***.*...ooooo******ooo*oooo****.o...ooooo*****oooo*ooooo*****.....ooooo********oooooo****.oo*.ooooo*****ooo**ooo***.oooo

Series de tiempo

85.67┤╭╮78.20┤││╭╮70.73┤││╭╮╭╮╭╮╭╮╭╯╰─╮63.27┤╭╮╭─╮││╭╯╰╮│╰─╯╰╮╭╮│╰──╯│╭55.80┤╭╮╭╮││╭╮╭╮╭╮│╰─╯╰─╯││││││╰╯48.33┤│╰╮╭──╮│││││╰╮│╰╯││╰╯╰╯╰╯40.87┤╭╮│╰╮╭╮╭╯╰─╮╭╮╭─╯╰╯╰╯╰╯╰──╯33.40┤│││╰╯╰╮╭╯││╰╯25.93┤││╭╯╰╯╰╯18.47┼╯││11.00┤╰╯└───────────┴───────────┴───────────┴───────────┴───────────┴────201120122013201420152016E+-------------------------*--+E|oD|-------------------*--*--|--*D|oo|oC|-------------*--*||||C|oo||||B|-------*--*||||||B|oo||||||A+-*--*--+--+--+--+--+--+--+--+A+-o--o--|--|--|--|--|--|--|--|51015202530354045505101520253035404550▲Uin:.------------------------:|:|*---'~~~~~~~~~~~~~~~~~~~~~~~~▶Udc▲Udc_OK:.---------------------:/:::/::*---'~~~~:~~~~~~~:~~~~~~~~~~~▶:<----->:500ms▲:Cpu.Qon:~~~~~~~~~~~~~~~~.-----------:|Inactive:Active|*----------------'~~~~~~~Chips

+-----++----[PWR]-------------------|USB|--+|+-----+||GND/RST2[][]||MOSI2/SCK2[][]A5/SCL[]|C5|5V/MISO2[][]A4/SDA[]|C4|AREF[]||GND[]||[]N/CSCK/13[]|B5|[]IOREFMISO/12[]|.|[]RSTMOSI/11[]~|.|[]3V3+---+10[]~|.|[]5v|A|9[]~|.|[]GND-|R|-8[]|B0|[]GND-|D|-||[]Vin-|U|-7[]|D7|-|I|-6[]~|.|[]A0-|N|-5[]~|.|[]A1-|O|-4[]|.|[]A2+---+INT1/3[]~|.|[]A3INT0/2[]|.|[]A4/SDARSTSCKMISOTX>1[]|.|[]A5/SCL[][][]RX<0[]|D0|[][][]||UNO_R3GNDMOSI5V___________||_________________________|

Circuitos

+10-15V___0,047R*---------o-----o-|___|-o--o---------o----o-------.+||||||||-===-_|_||.+.|||-===-.-.||||2k2|||-===-470|+||||||_|_-|uF|'--.|'+'.+.|\/LED+---------o|6|7|81k|||-+-___|___.-+----+--+--.||||-═══-||'+'||-||1||/BC|GND|+------o--+547|||||`>|||.+.||.-------+|220R||o----||-+IRF9Z34|||||||+->||MC34063|`+'|||-+||||||BYV29-12V6|||'----'o--|<-o----o--XOUT6000micro-|+||2|||Farad,40V___|_____||--oC|||Capacitor~~~~~||GND30uHC||---470|||31nFC||###uF|||-------||--.|||+|'-----+----+-'|GND|GND|5|4|||||'-------------o-------------o||___|`-------------*------/\/\/------------o--|___|-'2k|1k0.+.||5k6+3k3||inSerie'+'|GND

Mapas mentales

.-->Alpha/.---->InitialReleasePlanning*-------./\\/'--->Patch1Initialresearch\/\*\/'-->Patch2\\/--------->Beta\\/\oo_______\.---.*-----./\'------>||'------o->.Release.`---'o\_______/ooo\/\\\.--'\\\/\\'----+->Pushbacks/\\\/|\\'---->Setbacks/|\\V/|\'----->ReceptionTeam/|\v/|\Worklaod/.'-->>CareerchangeV/PTO/VBug

garabatos

Líneas con decoraciones

+----+o|o**.----------.*-+---.'-*-+-|v^\/|.--------.||'--->+----+->*<-/.-+->*<-o--+|'------>||<-'*---+|<----->|+----'|^\'---------'||__|v*----------'.--->FABCD/*-------*-----*---*----*----->E\^\\/'--->GB-->C-+

Finales de línea

o-o*-o//*ooooo****oooo****oooo****o-**-*vv^^||||||||\\\\\\\\////////o->*->*o||o*vo*vo*vo*vo*vo*vo-*-^^*o||^^^^^^^||^^vv*o^^^^||||\\\\\\\\///////*o*o^^o*vo*vo*vo*vo*vo*v<-o<-*<-><--o-*->--*<-o<-->o->*\|/\vvv/\|/v+-----+vvvv->||<-->*<-^+-----+^^^^/^^^\/|\/|\

Gráfico con nodos pequeños

A1248*-->o<-->o<--o---------.o^^|^||v|o<->*<-->o--->*-->o-->o<-->*3B5C67D

Diagramas gráficos

03P*Eye/^/*-------*+y\+)\/Reflection1/|2/|^\\\v*-+-----*||v0\v3--------*--------||4||7|◄╮*----\-----*|*-----|-*⤹+----->+x/vX\o|/|//⤴/o\/\*-------*v/\/\56+zv1*------------------*v2o-----o

Trabajo en progreso

Esta es una lista de construcciones que actualmente están buscando apoyo.

Los caracteres del diagrama UT8 están desactivados

┌─────────────────────────────────┐┌─────────────────────────────────┐|┌─────────────────────────────┐||┌─────────────────────────────┐|||https://rp.example||||https://rp.example|||└─────────────────────────────┘||└─────────────────────────────┘||┌─────────────────────────────┐||┌─────────────────────────────┐|||||||||||Welcometomywebsite!||||Welcometomywebsite!|||||||||||||||||||+─────────────────────────────+||+─────────────────────────────+|||Chooseanaccount||||Sign-intorp.example||||tosign-intorp.example||||withidp.example?||||||||||||┌────┐||||┌────┐|||||:)|JohnDoe||──►|||:)|JohnDoe||||└────┘john@email.com||||└────┘john@email.com||||┌────┐|||||||||:]|JohnDoe||||┌─────────────────────────┐||||└────┘john.doe@work.com|||||ContinueasJohn|||||||||└─────────────────────────┘|||└─────────────────────────────┘||└─────────────────────────────┘|└─────────────────────────────────┘└─────────────────────────────────┘

Los triángulos conectados sin + no son puntiagudos

/\

Las diagonales no se unen con guiones bajos

___/\

La detección de texto se confunde

-----|||

Pequeños escalones curvos

-.__.-

Paréntesis y esferas

\/||()()/\||__.-..-.||/\(__)(1)||'-'+)(+'-'\/

Flechas laterales diagonales

\/\/><<>><<>/\/\

Trabajo relacionado

El trabajo más cercano a los tipogramas es svgbob : representa diagramas de ASCII y funciona en navegadores (a través de un puerto webassembly que escupe SVG). Admite un conjunto similar de características (con la notable excepción de su compatibilidad con el dibujo de círculos) y elige un conjunto similar de convenciones tipográficas (con la notable excepción de la representación de texto). Está bien especificado . Me encontré con suficientes desafíos con (a) la representación de texto y (b) la ejecución en el navegador a través del puerto webassembly que me motivó a escribir un renderizador de diagrama ASCII en JS (svgbob está escrito en rust), pero por lo demás es perfectamente válido ( más madura) alternativa.

A partir de ahí, hay una serie de proyectos que generaron imágenes a partir de diagramas ASCII pero que no eran (a) particularmente buenos para usarse de forma aislada (es decir, solo diagramas) o (b) en páginas web (es decir, ejecutándose de forma nativa en los navegadores): asciitosvg , ditaa y markdeep (y go port GoAT ) en particular.

A diferencia de bibliotecas como mermaid , los tipogramas se definen tipográficamente (WYSWYG), en lugar de semánticamente (una transformación de una descripción de alto nivel a gráficos), lo que presenta una compensación diferente: le brinda más control sobre la representación (expresividad) a costa de hacerte escribir más (productividad).

Especificación




 

Scroll al inicio