34 ms·

Typograms: A definition and renderer for ASCII diagrams

162 points by sgoto 3y ago

AndrewThrowaway 3y ago
So how do I easily draw? I can see potential to use it in documentation and etc but how do I create e.g. mock? Just typing all the symbols I need to remember?
- kordlessagain 3y ago
  Or have an LLM do it after indexing the project.
  - venusenvy47 3y ago
    I've asked ChatGPT to render simple alphabet letters in ASCII art and it gives ridiculous results. It seems like the worst skill it has.
- sgoto 3y ago
  Many diagrams I am able to draw manually as I'm editing source code on emacs, but for more complicated ones I tend to use this: https://asciiflow.com https://asciiflow.com . To each their own, so pick your favorite ASCII editor.
sgoto 3y ago
Previously submitted in personal repo: https://news.ycombinator.com/item?id=32133345 https://news.ycombinator.com/item?id=32133345 Now, officially open sourced: https://github.com/google/typograms https://github.com/google/typograms
lachlan_gray 3y ago
This would combine really nicely with virtualedit=true in vim
- koprulusector 3y ago
  Oooohhh neat! By the way, virtualedit takes a string, can be block, onemore, all, or none.
johnnyworker 3y ago
As someone who is heavily biased against anything Google, the "related work" paragraph positively surprised me. I wish more software authors would point out alternatives in what I can only describe as a user friendly and generous manner.
- spankalee 3y ago
  Google is made of people and Sam is a delightful person that you don't need to be "biased" against.
  - johnnyworker 3y ago
    Yeah, I know that wonderful individuals work there. As is true for Microsoft and even Facebook and so on. But I saw google.github and was looking for something to not like about it, I have to admit that, and I found nothing. Kudos and thanks to the author.
- everybodyknows 3y ago
  As someone who's contributed to one of the "related" alternatives, I'm struck by the beauty of a JS-based solution. With the browser able to produce the SVGs on its own, on demand, they need never be stored (assuming all viewing is to be done in a browser).
Cockbrand 3y ago
Selecting text in the example diagrams somehow reminds me of Carpenter's "They Live", where the protagonist has glasses to see through the superficial appearance of people and billboards. That said, I haven't seen this or the mentioned related work before, and it's really neat how easy it is to create good looking and very readable diagrams with this.
chrismorgan 3y ago
> A polyfill is available that allows you use to use it in browsers. This isn’t a polyfill. Polyfills are about implementing new native stuff on old environments, but no browser is going to be including this any time soon, and certainly not in this form— > <script type="text/typogram"> This should use <pre> instead, e.g. <pre class="typogram">. It’s content, not scripting, and if the JavaScript isn’t run (for whatever reason—JS is less reliable than people often think, especially third-party JS, even on environments that don’t try to block it) you’d like the diagram to still be visible in some form. (Retaining the <pre> would also be a great improvement for selecting text—the current arrangement of “place single-character <text> elements” is almost useless for copy and paste (losing spaces and line breaks), which is the main reason I can imagine wanting such a thing. If character sizes and aspect ratios are a concern, control that stuff with scaling transforms or line-height, and detect and contain (e.g. <span style="overflow:visible;width:…">…</span>) individual characters that are falling out of the grid due to font fallback or bad ligatures like Nimbus Mono <https://github.com/ArtifexSoftware/urw-base35-fonts/issues/31 https://github.com/ArtifexSoftware/urw-base35-fonts/issues/3...>.)
- sgoto 3y ago
  Fair point on the point on the term polyfill. Done, replaced it with "JS renderer" [1]. [1] https://github.com/google/typograms/commit/4270c0ad387a2b500a1c6fd1118967c5b03f143a https://github.com/google/typograms/commit/4270c0ad387a2b500...
- Terr_ 3y ago
  > if the JavaScript isn’t run [...] you’d like the diagram to still be visible in some form. Yeah, that's one of the things that disappointed me about the linked page, I expected the diagrams to degrade gracefully into regular ASCII-art. One of the ways I could imagine using this being useful is in markdown documents, following the principle that the source is good-enough to follow even if some additional processing could make it better.
- bastawhiz 3y ago
  > This should use <pre> instead I'd say that this is the perfect use case for a custom element
mdtrooper 3y ago
There is a lot of alternatives before of google, for example Ditaa https://github.com/stathissideris/ditaa https://github.com/stathissideris/ditaa . There is a small list (in spanish) in: https://tomatesasesinos.com/2020/06/11/anti-nocodetools-diagramas/ https://tomatesasesinos.com/2020/06/11/anti-nocodetools-diag...
avgcorrection 3y ago
> Typograms optimizes for editability and portability (e.g. plain text is easy to maintain, change, store and transmit), at the cost of expressivity (e.g. SVG is more expressive) and ergonomics (e.g. higher level tools produce diagrams faster). How can it be both “easy to change” and not be ergonomic?
- kazinator 3y ago
  Because the editing is at the character level. If you look at the page source, this is what the grids look like for instance: +----+ +----+ / \ / \ .-----+-----+-----. + +----+ +----+ | | | | .-----+-----+-----+-----+ \ / \ / \ | | | | / / / / / +----+ +----+ + +-----+-----+-----+ +-----+-----+-----+-----+ / \ / \ / | | | | / / / / / + +----+ +----+ | | | | +-----+-----+-----+-----+ \ / \ / \ +-----+-----+-----+ / / / / / +----+ +----+ + | | | | +-----+-----+-----+-----+ \ / \ / | | | | / / / / / +----+ +----+ '-----+-----+-----' '-----+-----+-----+-----+ That's easy to change, but even for the top Vim slingers, it's not that ergonomic to produce by text editing. You could benefit from tooling to produce the underlying ASCII diagrams; this tool is just a renderer to make them look nicer.
  - sgoto 3y ago
    Exactly.
jph 3y ago
Typograms could be great with the monodraw app on macOS. I'm a very happy customer of monodraw-- not affiliated in any way. https://monodraw.helftone.com/ https://monodraw.helftone.com/
- tgrosinger 3y ago
  I love Monodraw. I've been searching for a non-Mac equivalent for years and have so far come up empty handed.
  - andytruett 3y ago
    What sets Monodraw apart as compared to something like ASCIIFlow?
    - alanwreath 3y ago
      It works. At least ASCII flow is very very buggy on my Mac. And I’ve attempted with many web browsers. That said, I’m hopeful that it improves its usability and it’s pretty awesome that it is open source and can be run locally which reminds me of hastebin.
    - tgrosinger 3y ago
      Monodraw has an understanding of objects in an ascii drawing. For example, you can select a box and edit the properties of it, or easily move just the box and not boxes within it. Essentially it's a full flowchart editor that just outputs ascii.
  - ivanceras 3y ago
    I'm working on it. I'm the author of svgbob, but it will take me awhile to polish this. https://ivanceras.github.io/bob-editor/ https://ivanceras.github.io/bob-editor/
    - SanchoPanda 3y ago
      Thank you for svgbob, I adore it.
worthless-trash 3y ago
Its amazing, we can have thousands of emoticons, but not the more complex ascii to use for boxes.
- CRConrad 3y ago
  The old extended-ASCII line drawing characters are still there in Unicode.
dolmen 3y ago
This reminds me I still have to learn Pikchr, the diagramming language used to render SQLite syntax diagrams. https://pikchr.org/home/doc/trunk/homepage.md https://pikchr.org/home/doc/trunk/homepage.md
layer8 3y ago
Examples of actual typograms [0]: https://aaronkuehn.com/art https://aaronkuehn.com/art [0] https://en.wiktionary.org/wiki/typogram https://en.wiktionary.org/wiki/typogram
deleted 3y ago
[deleted]
badcppdev 3y ago
Cute. But if the maintainer(?) is reading these comments it looks like the inductor in the circuit section isn't working correctly. I can separate "C" characters rather than the normal circuit symbol
- sgoto 3y ago
  Maintainer(!) here, reading the comments! Can you help me understand what you'd expect? I can't really find the "inductor" you are referring to and the "C" character that seems off to you. Care to expand a bit so that I can try to fix?
  - badcppdev 3y ago
    Hiya, In the "Circuit" section there is the text "30uH" and a few characters to the right of that there is a column with 3 "C" characters arranged vertically. Next to each "C" character is a pipe "|" character. The standard unit of inductance is the henry (H) so I assume 40uH is the value of that component and therefore I would expect that arrangement of 6 characters to map to an inductor symbol: ( https://commons.wikimedia.org/wiki/File:Inductor_Symbols.jpg https://commons.wikimedia.org/wiki/File:Inductor_Symbols.jpg ) rather than staying as separate C characters with a vertical line next to it. (If this is a bug with my browser then I can only say that I'm using Chrome on MacOS and everything else looks correct)
lionkor 3y ago
Text clips on the top side on firefox android, which is quite embarrassing
- akavel 3y ago
  Same in desktop version of Firefox. Also, the examples in the last 3 sections in "Scribbles" ("Small curved steps", "Parenthesis and spheres", "Diagonal Side-way Arrows") don't seem to actually render anything interesting, just showing what is presumably the original ASCII-Art behind them. I'm confused if that's what was intended there, or something is broken (?) edit: The whole situation is even weirder given that half of the motivation claimed by the author in the "Related" section is apparently specifically: "ran into enough challenges with [...] the text rendering [in svgbob ...] that motivated me to rewrite it in JS (svgbob is written in rust)". I mentioned my confusion about relation to svgbob in a top-level comment here, but the quote above makes it even weirder to have Typograms actually render text poorly (in Firefox)... and the jokes and tropes just seem to want to write themselves here, whether about rewriting Rust in JS, or about Google ignoring Firefox...
akavel 3y ago
I'm somewhat confused: the "Related" section says: "[...] that motivated me to rewrite it [- presumably: svgbob -] in JS (svgbob is written in rust)" [...]" So, is "Typograms" a modified rewrite of svgbob in JS? IF yes, isn't it a Derivative Work of svgbob, and (per the Apache License, which seems to match the one used here) shouldn't "Typograms" keep the mention of the original author somewhere in the Licensing information, and notably their original Copyright note? (As present e.g. in svgbob's License file.) IF NOT, then why mention a "rewrite"? What is actual relation of Typograms to svgbob? This becomes even weirder given that some of the examples in the Typograms demo seem reused verbatim from the svgbob demo - but rendered poorer (at least on Firefox); making it sound like it is a rewrite also makes it sound like it is a - sorry for this - crappy rewrite... and this under google's name... but then in the end is it actually not a rewrite? is it just a - still at first glance seemingly crappy, sorry - clone? (hm, at least I'd love to show some clearly highlighted improvements over svgbob, maybe? if I'm not to focus on the somewhat-broken parts of the demo?) aaaand still under google's name?... reeeeaaaaaallllyyyyy wierd and confusing case to me... (O_o)
- paxys 3y ago
  A rewrite is NOT a derivative work, as long as it is only copying the interfaces and not original code.
  - akavel 3y ago
    Hmm, IANAL, though I seem to believe there tends to be a question of "have you seen the original code before writing your clone" - which presumes that you still risk copying some code - or are you doing a "cleanroom reimplementation" without ever at all seeing the original code, just basing purely on a specification of the original, ideally written by someone else. As long as it's not pristine cleanroom, I think it's potentially murky territory.
    - sgoto 3y ago
      Done, merged a patch to clarify that it is absolutely the latter: this is an implementation from scratch with completely different rendering passes, design and SVG output structures. Does that help? https://github.com/google/typograms/commit/bdd329eaec7497b9611a462f8bd0e50865df1ed1 https://github.com/google/typograms/commit/bdd329eaec7497b96...
blondin 3y ago
how would you export something like this to an image? and also, would this work in github markdown?
minhmeoke 3y ago
Thank you, this looks really useful! One more ASCII-based tool that you could add into your workflow is https://arthursonzogni.com/Diagon/#Sequence https://arthursonzogni.com/Diagon/#Sequence which can be used to generate the ASCII that you input into Typogram. For example, input: Renderer -> Browser: BeginNavigation() Browser -> Network: URLRequest() Browser <- Network: URLResponse() Renderer <- Browser: CommitNavigation() Renderer -> Browser: DidCommitNavigation() will output the following sequence diagram: .--------. .-------. .-------. |Renderer| |Browser| |Network| '--------' '-------' '-------' | | | | BeginNavigation() | | |-------------------->| | | | | | |URLRequest() | | |------------>| | | | | |URLResponse()| | |<------------| | | | | CommitNavigation() | | |<--------------------| | | | | |DidCommitNavigation()| | |-------------------->| | .--------. .-------. .-------. |Renderer| |Browser| |Network| '--------' '-------' '-------' and then you can perform further edits using something like https://asciiflow.com/ https://asciiflow.com/ (web, free) or https://ivanceras.github.io/bob-editor/ https://ivanceras.github.io/bob-editor/ (web, free) or https://monodraw.helftone.com/ https://monodraw.helftone.com/ (Mac only, proprietary) as mentioned in other comments.
- kiitos 3y ago
  But like, why not just use that ASCII sequence diagram directly? Renderer Browser Network ======== ======= ======= | BeginNavigation | | |--------------------->| | | | URLRequest | | |------------->| | | | | | URLResponse | | |<-------------| | | | CommitNavigation | |<---------------------| | | | DidCommitNavigation | |--------------------->| | This took me like 45 seconds to produce in Visual Studio Code.
culi 3y ago
shameless self plug of my very small collection of ascii data viz libraries https://ascii.dataviz.gallery/ https://ascii.dataviz.gallery/ planning to grow it soon with a more thorough breakdown of what libraries are available for what programming languages
- SanchoPanda 3y ago
  Looking forward to seeing more.
- sgoto 3y ago
  Neat! Want to send a PR with some of these diagrams as examples?
kiitos 3y ago
ASCII diagrams can easily be drawn and maintained directly. That's kind of the whole point! Generating them from some more primitive declaration language makes them harder to use, not easier. This kind of tool is frustrating.
- kazinator 3y ago
  No; these diagrams are not drawn from a semantic declaration language. They are drawn from ASCII diagrams. They are just inferring a "skin" made of nicer-looking Unicode symbols. The examples don't show the source code next to them, but you can just view the page source in your browser (e.g. Ctrl-U in Firefox).
  - kiitos 3y ago
    So the purpose of the tool is to transform an ASCII diagram to a Unicode diagram? I struggle to understand the value of such a thing. +---+ +---+ | A |-->| B | +---+ +---+ is actually better than ┌─┐ ┌─┐ │A│→│B│ └─┘ └─┘ because it can be manipulated without external tools. Right?
- eternityforest 3y ago
  Maintaining them by hand seems like a really excessive level of manual work. Most tools are basically raster drawing based, and raster graphics requires you to have a general layout of where things go in your head, or else spend a lot more time on the trial and error.
  - kiitos 3y ago
    This has never been my experience. Any editor with multi-cursor support can easily be used to produce or maintain ASCII diagrams like the ones described so far.
    - eternityforest 3y ago
      I've never used multi-cursor, but it still seems harder than markup, or vector graphics. If you do anything complex, and you're not happy with your layout, you can't just drag the boxes around. Seems like you'd kind of have to have a clear idea of where everything goes before you start to really work effectively. Or is that part of the appeal, practicing skills you normally would use as a coder?
CRConrad 3y ago
So this is basically just what we used to do in IBM Extended ASCII like thirty-five (forty?) years ago, only slightly expanded because Unicode has more characters than Codepage... Uh, 472? 185? I forget. But anyway, wow: So much time, so little progress.

162 points by sgoto 3y ago

So how do I easily draw? I can see potential to use it in documentation and etc but how do I create e.g. mock? Just typing all the symbols I need to remember?

kordlessagain 3y ago
Or have an LLM do it after indexing the project.
- venusenvy47 3y ago
  I've asked ChatGPT to render simple alphabet letters in ASCII art and it gives ridiculous results. It seems like the worst skill it has.
sgoto 3y ago
Many diagrams I am able to draw manually as I'm editing source code on emacs, but for more complicated ones I tend to use this: https://asciiflow.com https://asciiflow.com . To each their own, so pick your favorite ASCII editor.

sgoto 3y ago

Previously submitted in personal repo: https://news.ycombinator.com/item?id=32133345 https://news.ycombinator.com/item?id=32133345 Now, officially open sourced: https://github.com/google/typograms https://github.com/google/typograms

lachlan_gray 3y ago

This would combine really nicely with virtualedit=true in vim

koprulusector 3y ago
Oooohhh neat! By the way, virtualedit takes a string, can be block, onemore, all, or none.

johnnyworker 3y ago

As someone who is heavily biased against anything Google, the "related work" paragraph positively surprised me. I wish more software authors would point out alternatives in what I can only describe as a user friendly and generous manner.

spankalee 3y ago
Google is made of people and Sam is a delightful person that you don't need to be "biased" against.
- johnnyworker 3y ago
  Yeah, I know that wonderful individuals work there. As is true for Microsoft and even Facebook and so on. But I saw google.github and was looking for something to not like about it, I have to admit that, and I found nothing. Kudos and thanks to the author.
everybodyknows 3y ago
As someone who's contributed to one of the "related" alternatives, I'm struck by the beauty of a JS-based solution. With the browser able to produce the SVGs on its own, on demand, they need never be stored (assuming all viewing is to be done in a browser).

Cockbrand 3y ago

Selecting text in the example diagrams somehow reminds me of Carpenter's "They Live", where the protagonist has glasses to see through the superficial appearance of people and billboards. That said, I haven't seen this or the mentioned related work before, and it's really neat how easy it is to create good looking and very readable diagrams with this.

chrismorgan 3y ago

> A polyfill is available that allows you use to use it in browsers. This isn’t a polyfill. Polyfills are about implementing new native stuff on old environments, but no browser is going to be including this any time soon, and certainly not in this form— > <script type="text/typogram"> This should use <pre> instead, e.g. <pre class="typogram">. It’s content, not scripting, and if the JavaScript isn’t run (for whatever reason—JS is less reliable than people often think, especially third-party JS, even on environments that don’t try to block it) you’d like the diagram to still be visible in some form. (Retaining the <pre> would also be a great improvement for selecting text—the current arrangement of “place single-character <text> elements” is almost useless for copy and paste (losing spaces and line breaks), which is the main reason I can imagine wanting such a thing. If character sizes and aspect ratios are a concern, control that stuff with scaling transforms or line-height, and detect and contain (e.g. <span style="overflow:visible;width:…">…</span>) individual characters that are falling out of the grid due to font fallback or bad ligatures like Nimbus Mono <https://github.com/ArtifexSoftware/urw-base35-fonts/issues/31 https://github.com/ArtifexSoftware/urw-base35-fonts/issues/3...>.)

sgoto 3y ago
Fair point on the point on the term polyfill. Done, replaced it with "JS renderer" [1]. [1] https://github.com/google/typograms/commit/4270c0ad387a2b500a1c6fd1118967c5b03f143a https://github.com/google/typograms/commit/4270c0ad387a2b500...
Terr_ 3y ago
> if the JavaScript isn’t run [...] you’d like the diagram to still be visible in some form. Yeah, that's one of the things that disappointed me about the linked page, I expected the diagrams to degrade gracefully into regular ASCII-art. One of the ways I could imagine using this being useful is in markdown documents, following the principle that the source is good-enough to follow even if some additional processing could make it better.
bastawhiz 3y ago
> This should use <pre> instead I'd say that this is the perfect use case for a custom element

mdtrooper 3y ago

There is a lot of alternatives before of google, for example Ditaa https://github.com/stathissideris/ditaa https://github.com/stathissideris/ditaa . There is a small list (in spanish) in: https://tomatesasesinos.com/2020/06/11/anti-nocodetools-diagramas/ https://tomatesasesinos.com/2020/06/11/anti-nocodetools-diag...

avgcorrection 3y ago

> Typograms optimizes for editability and portability (e.g. plain text is easy to maintain, change, store and transmit), at the cost of expressivity (e.g. SVG is more expressive) and ergonomics (e.g. higher level tools produce diagrams faster). How can it be both “easy to change” and not be ergonomic?

kazinator 3y ago
Because the editing is at the character level. If you look at the page source, this is what the grids look like for instance: +----+ +----+ / \ / \ .-----+-----+-----. + +----+ +----+ | | | | .-----+-----+-----+-----+ \ / \ / \ | | | | / / / / / +----+ +----+ + +-----+-----+-----+ +-----+-----+-----+-----+ / \ / \ / | | | | / / / / / + +----+ +----+ | | | | +-----+-----+-----+-----+ \ / \ / \ +-----+-----+-----+ / / / / / +----+ +----+ + | | | | +-----+-----+-----+-----+ \ / \ / | | | | / / / / / +----+ +----+ '-----+-----+-----' '-----+-----+-----+-----+ That's easy to change, but even for the top Vim slingers, it's not that ergonomic to produce by text editing. You could benefit from tooling to produce the underlying ASCII diagrams; this tool is just a renderer to make them look nicer.
- sgoto 3y ago
  Exactly.

jph 3y ago

Typograms could be great with the monodraw app on macOS. I'm a very happy customer of monodraw-- not affiliated in any way. https://monodraw.helftone.com/ https://monodraw.helftone.com/

tgrosinger 3y ago
I love Monodraw. I've been searching for a non-Mac equivalent for years and have so far come up empty handed.
- andytruett 3y ago
  What sets Monodraw apart as compared to something like ASCIIFlow?
  - alanwreath 3y ago
    It works. At least ASCII flow is very very buggy on my Mac. And I’ve attempted with many web browsers. That said, I’m hopeful that it improves its usability and it’s pretty awesome that it is open source and can be run locally which reminds me of hastebin.
  - tgrosinger 3y ago
    Monodraw has an understanding of objects in an ascii drawing. For example, you can select a box and edit the properties of it, or easily move just the box and not boxes within it. Essentially it's a full flowchart editor that just outputs ascii.
- ivanceras 3y ago
  I'm working on it. I'm the author of svgbob, but it will take me awhile to polish this. https://ivanceras.github.io/bob-editor/ https://ivanceras.github.io/bob-editor/
  - SanchoPanda 3y ago
    Thank you for svgbob, I adore it.

worthless-trash 3y ago

Its amazing, we can have thousands of emoticons, but not the more complex ascii to use for boxes.

CRConrad 3y ago
The old extended-ASCII line drawing characters are still there in Unicode.

dolmen 3y ago

This reminds me I still have to learn Pikchr, the diagramming language used to render SQLite syntax diagrams. https://pikchr.org/home/doc/trunk/homepage.md https://pikchr.org/home/doc/trunk/homepage.md

layer8 3y ago

Examples of actual typograms [0]: https://aaronkuehn.com/art https://aaronkuehn.com/art [0] https://en.wiktionary.org/wiki/typogram https://en.wiktionary.org/wiki/typogram

deleted 3y ago

[deleted]

badcppdev 3y ago

Cute. But if the maintainer(?) is reading these comments it looks like the inductor in the circuit section isn't working correctly. I can separate "C" characters rather than the normal circuit symbol

sgoto 3y ago
Maintainer(!) here, reading the comments! Can you help me understand what you'd expect? I can't really find the "inductor" you are referring to and the "C" character that seems off to you. Care to expand a bit so that I can try to fix?
- badcppdev 3y ago
  Hiya, In the "Circuit" section there is the text "30uH" and a few characters to the right of that there is a column with 3 "C" characters arranged vertically. Next to each "C" character is a pipe "|" character. The standard unit of inductance is the henry (H) so I assume 40uH is the value of that component and therefore I would expect that arrangement of 6 characters to map to an inductor symbol: ( https://commons.wikimedia.org/wiki/File:Inductor_Symbols.jpg https://commons.wikimedia.org/wiki/File:Inductor_Symbols.jpg ) rather than staying as separate C characters with a vertical line next to it. (If this is a bug with my browser then I can only say that I'm using Chrome on MacOS and everything else looks correct)

lionkor 3y ago

Text clips on the top side on firefox android, which is quite embarrassing

akavel 3y ago
Same in desktop version of Firefox. Also, the examples in the last 3 sections in "Scribbles" ("Small curved steps", "Parenthesis and spheres", "Diagonal Side-way Arrows") don't seem to actually render anything interesting, just showing what is presumably the original ASCII-Art behind them. I'm confused if that's what was intended there, or something is broken (?) edit: The whole situation is even weirder given that half of the motivation claimed by the author in the "Related" section is apparently specifically: "ran into enough challenges with [...] the text rendering [in svgbob ...] that motivated me to rewrite it in JS (svgbob is written in rust)". I mentioned my confusion about relation to svgbob in a top-level comment here, but the quote above makes it even weirder to have Typograms actually render text poorly (in Firefox)... and the jokes and tropes just seem to want to write themselves here, whether about rewriting Rust in JS, or about Google ignoring Firefox...

akavel 3y ago

I'm somewhat confused: the "Related" section says: "[...] that motivated me to rewrite it [- presumably: svgbob -] in JS (svgbob is written in rust)" [...]" So, is "Typograms" a modified rewrite of svgbob in JS? IF yes, isn't it a Derivative Work of svgbob, and (per the Apache License, which seems to match the one used here) shouldn't "Typograms" keep the mention of the original author somewhere in the Licensing information, and notably their original Copyright note? (As present e.g. in svgbob's License file.) IF NOT, then why mention a "rewrite"? What is actual relation of Typograms to svgbob? This becomes even weirder given that some of the examples in the Typograms demo seem reused verbatim from the svgbob demo - but rendered poorer (at least on Firefox); making it sound like it is a rewrite also makes it sound like it is a - sorry for this - crappy rewrite... and this under google's name... but then in the end is it actually not a rewrite? is it just a - still at first glance seemingly crappy, sorry - clone? (hm, at least I'd love to show some clearly highlighted improvements over svgbob, maybe? if I'm not to focus on the somewhat-broken parts of the demo?) aaaand still under google's name?... reeeeaaaaaallllyyyyy wierd and confusing case to me... (O_o)

paxys 3y ago
A rewrite is NOT a derivative work, as long as it is only copying the interfaces and not original code.
- akavel 3y ago
  Hmm, IANAL, though I seem to believe there tends to be a question of "have you seen the original code before writing your clone" - which presumes that you still risk copying some code - or are you doing a "cleanroom reimplementation" without ever at all seeing the original code, just basing purely on a specification of the original, ideally written by someone else. As long as it's not pristine cleanroom, I think it's potentially murky territory.
  - sgoto 3y ago
    Done, merged a patch to clarify that it is absolutely the latter: this is an implementation from scratch with completely different rendering passes, design and SVG output structures. Does that help? https://github.com/google/typograms/commit/bdd329eaec7497b9611a462f8bd0e50865df1ed1 https://github.com/google/typograms/commit/bdd329eaec7497b96...

blondin 3y ago

how would you export something like this to an image? and also, would this work in github markdown?

minhmeoke 3y ago

Thank you, this looks really useful! One more ASCII-based tool that you could add into your workflow is https://arthursonzogni.com/Diagon/#Sequence https://arthursonzogni.com/Diagon/#Sequence which can be used to generate the ASCII that you input into Typogram. For example, input: Renderer -> Browser: BeginNavigation() Browser -> Network: URLRequest() Browser <- Network: URLResponse() Renderer <- Browser: CommitNavigation() Renderer -> Browser: DidCommitNavigation() will output the following sequence diagram: .--------. .-------. .-------. |Renderer| |Browser| |Network| '--------' '-------' '-------' | | | | BeginNavigation() | | |-------------------->| | | | | | |URLRequest() | | |------------>| | | | | |URLResponse()| | |<------------| | | | | CommitNavigation() | | |<--------------------| | | | | |DidCommitNavigation()| | |-------------------->| | .--------. .-------. .-------. |Renderer| |Browser| |Network| '--------' '-------' '-------' and then you can perform further edits using something like https://asciiflow.com/ https://asciiflow.com/ (web, free) or https://ivanceras.github.io/bob-editor/ https://ivanceras.github.io/bob-editor/ (web, free) or https://monodraw.helftone.com/ https://monodraw.helftone.com/ (Mac only, proprietary) as mentioned in other comments.

kiitos 3y ago
But like, why not just use that ASCII sequence diagram directly? Renderer Browser Network ======== ======= ======= | BeginNavigation | | |--------------------->| | | | URLRequest | | |------------->| | | | | | URLResponse | | |<-------------| | | | CommitNavigation | |<---------------------| | | | DidCommitNavigation | |--------------------->| | This took me like 45 seconds to produce in Visual Studio Code.

culi 3y ago

shameless self plug of my very small collection of ascii data viz libraries https://ascii.dataviz.gallery/ https://ascii.dataviz.gallery/ planning to grow it soon with a more thorough breakdown of what libraries are available for what programming languages

SanchoPanda 3y ago
Looking forward to seeing more.
sgoto 3y ago
Neat! Want to send a PR with some of these diagrams as examples?

kiitos 3y ago

ASCII diagrams can easily be drawn and maintained directly. That's kind of the whole point! Generating them from some more primitive declaration language makes them harder to use, not easier. This kind of tool is frustrating.

kazinator 3y ago
No; these diagrams are not drawn from a semantic declaration language. They are drawn from ASCII diagrams. They are just inferring a "skin" made of nicer-looking Unicode symbols. The examples don't show the source code next to them, but you can just view the page source in your browser (e.g. Ctrl-U in Firefox).
- kiitos 3y ago
  So the purpose of the tool is to transform an ASCII diagram to a Unicode diagram? I struggle to understand the value of such a thing. +---+ +---+ | A |-->| B | +---+ +---+ is actually better than ┌─┐ ┌─┐ │A│→│B│ └─┘ └─┘ because it can be manipulated without external tools. Right?
eternityforest 3y ago
Maintaining them by hand seems like a really excessive level of manual work. Most tools are basically raster drawing based, and raster graphics requires you to have a general layout of where things go in your head, or else spend a lot more time on the trial and error.
- kiitos 3y ago
  This has never been my experience. Any editor with multi-cursor support can easily be used to produce or maintain ASCII diagrams like the ones described so far.
  - eternityforest 3y ago
    I've never used multi-cursor, but it still seems harder than markup, or vector graphics. If you do anything complex, and you're not happy with your layout, you can't just drag the boxes around. Seems like you'd kind of have to have a clear idea of where everything goes before you start to really work effectively. Or is that part of the appeal, practicing skills you normally would use as a coder?

CRConrad 3y ago

So this is basically just what we used to do in IBM Extended ASCII like thirty-five (forty?) years ago, only slightly expanded because Unicode has more characters than Codepage... Uh, 472? 185? I forget. But anyway, wow: So much time, so little progress.