> <i>A polyfill is available that allows you use to use it in browsers.</i><p>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—<p>> <i><script type="text/typogram"></i><p>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 <i>some</i> form.<p>(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 <<a href="https://github.com/ArtifexSoftware/urw-base35-fonts/issues/31">https://github.com/ArtifexSoftware/urw-base35-fonts/issues/3...</a>>.)
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.
Typograms could be great with the monodraw app on macOS. I'm a very happy customer of monodraw-- not affiliated in any way.<p><a href="https://monodraw.helftone.com/" rel="nofollow noreferrer">https://monodraw.helftone.com/</a>
Previously submitted in personal repo:<p><a href="https://news.ycombinator.com/item?id=32133345">https://news.ycombinator.com/item?id=32133345</a><p>Now, officially open sourced:<p><a href="https://github.com/google/typograms">https://github.com/google/typograms</a>
Thank you, this looks really useful!<p>One more ASCII-based tool that you could add into your workflow is
<a href="https://arthursonzogni.com/Diagon/#Sequence" rel="nofollow noreferrer">https://arthursonzogni.com/Diagon/#Sequence</a>
which can be used to generate the ASCII that you input into Typogram.<p>For example, input:<p><pre><code> Renderer -> Browser: BeginNavigation()
Browser -> Network: URLRequest()
Browser <- Network: URLResponse()
Renderer <- Browser: CommitNavigation()
Renderer -> Browser: DidCommitNavigation()
</code></pre>
will output the following sequence diagram:<p><pre><code> .--------. .-------. .-------.
|Renderer| |Browser| |Network|
'--------' '-------' '-------'
| | |
| BeginNavigation() | |
|-------------------->| |
| | |
| |URLRequest() |
| |------------>|
| | |
| |URLResponse()|
| |<------------|
| | |
| CommitNavigation() | |
|<--------------------| |
| | |
|DidCommitNavigation()| |
|-------------------->| |
.--------. .-------. .-------.
|Renderer| |Browser| |Network|
'--------' '-------' '-------'
</code></pre>
and then you can perform further edits using something like <a href="https://asciiflow.com/" rel="nofollow noreferrer">https://asciiflow.com/</a> (web, free) or <a href="https://ivanceras.github.io/bob-editor/" rel="nofollow noreferrer">https://ivanceras.github.io/bob-editor/</a> (web, free) or <a href="https://monodraw.helftone.com/" rel="nofollow noreferrer">https://monodraw.helftone.com/</a> (Mac only, proprietary) as mentioned in other comments.
I'm somewhat confused: the "Related" section says:<p><i>"[...] that motivated me to rewrite it [- presumably: svgbob -] in JS (svgbob is written in rust)" [...]"</i><p>So, is "Typograms" a modified rewrite of svgbob in JS? <i>IF</i> 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.)<p><i>IF NOT</i>, 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 - <i>crappy</i> rewrite... and this under google's name... but then in the end is it actually <i>not</i> 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)
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.
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?
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.<p>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.
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.
Cute.<p>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
There is a lot of alternatives before of google, for example Ditaa <a href="https://github.com/stathissideris/ditaa">https://github.com/stathissideris/ditaa</a> .<p>There is a small list (in spanish) in: <a href="https://tomatesasesinos.com/2020/06/11/anti-nocodetools-diagramas/" rel="nofollow noreferrer">https://tomatesasesinos.com/2020/06/11/anti-nocodetools-diag...</a>
shameless self plug of my very small collection of ascii data viz libraries<p><a href="https://ascii.dataviz.gallery/" rel="nofollow noreferrer">https://ascii.dataviz.gallery/</a><p>planning to grow it soon with a more thorough breakdown of what libraries are available for what programming languages
> 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).<p>How can it be both “easy to change” and not be ergonomic?
This reminds me I still have to learn Pikchr, the diagramming language used to render SQLite syntax diagrams.<p><a href="https://pikchr.org/home/doc/trunk/homepage.md" rel="nofollow noreferrer">https://pikchr.org/home/doc/trunk/homepage.md</a>