Interactive ASCII art diagram generators. ๐ŸŒŸ
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commitโ€ฆ
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
src
test
tools
CMakeLists.txt
LICENSE
README.md

README.md

Diagon

Diagon is an interactive interpreter. It transforms markdown-style expression into an ascii-art representation.

It is written in C++ and use WebAssembly, HTML and CSS to make a Web Application.

https://arthursonzogni.com/Diagon/

Table of content

Generators

Mathematic Expression

input:

f(x) = 1 + x / (1 + x)

output (Unicode):

             x  
f(x) = 1 + โ”€โ”€โ”€โ”€โ”€
           1 + x

input:

sqrt(1+sqrt(1+x/2))

output (Unicode)

     _____________
    โ•ฑ        _____
   โ•ฑ        โ•ฑ    x
  โ•ฑ  1 +   โ•ฑ 1 + โ”€
โ•ฒโ•ฑ       โ•ฒโ•ฑ      2

input:

f(x) = 1 + x^2 + x^3 + x^(1+1/2)

output (Unicode):

                      โŽ›    1โŽž
                      โŽœ1 + โ”€โŽŸ
            2    3    โŽ    2โŽ 
f(x) = 1 + x  + x  + x       

input:

sum(i^2,i=0,n) = n^3/2+n^2/2+n/6

output (Unicode):

  n                   
 ___        3    2    
 โ•ฒ     2   n    n    n
 โ•ฑ    i  = โ”€โ”€ + โ”€โ”€ + โ”€
 โ€พโ€พโ€พ        2    2   6
i = 0                 

input:

int(x^2/2 * dx ,0,1) = 1/6

output (Unicode):

1            
โŒ   2         
โŽฎ x         1
โŽฎ โ”€โ”€ โ‹… dx = โ”€
โŒก  2        6
0            

input:

[a;b] + [c;d] = [a+c; b+d]

output (Unicode):

โŽ›aโŽž   โŽ›cโŽž   โŽ›a + cโŽž
โŽœ โŽŸ + โŽœ โŽŸ = โŽœ     โŽŸ
โŽbโŽ    โŽdโŽ    โŽb + dโŽ 

input:

[1,2;3,4] * [x;y] = [1*x+2*y; 3*x+4*y]
โŽ›1 2โŽž   โŽ›xโŽž   โŽ›1 โ‹… x + 2 โ‹… yโŽž
โŽœ   โŽŸ โ‹… โŽœ โŽŸ = โŽœ             โŽŸ
โŽ3 4โŽ    โŽyโŽ    โŽ3 โ‹… x + 4 โ‹… yโŽ 

Sequence Diagram

input

Alice -> Bob: Hello Bob!
Alice <- Bob: Hello Alice!

Output (Unicode)

โ”Œโ”€โ”€โ”€โ”€โ”€โ”       โ”Œโ”€โ”€โ”€โ”
โ”‚Aliceโ”‚       โ”‚Bobโ”‚
โ””โ”€โ”€โ”ฌโ”€โ”€โ”˜       โ””โ”€โ”ฌโ”€โ”˜
   โ”‚            โ”‚  
   โ”‚ Hello Bob! โ”‚  
   โ”‚โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€>โ”‚  
   โ”‚            โ”‚  
   โ”‚Hello Alice!โ”‚  
   โ”‚<โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”‚  
โ”Œโ”€โ”€โ”ดโ”€โ”€โ”       โ”Œโ”€โ”ดโ”€โ”
โ”‚Aliceโ”‚       โ”‚Bobโ”‚
โ””โ”€โ”€โ”€โ”€โ”€โ”˜       โ””โ”€โ”€โ”€โ”˜

Input

Renderer -> Browser: BeginNavigation()
Browser -> Network: URLRequest()
Browser <- Network: URLResponse()
Renderer <- Browser: CommitNavigation()
Renderer -> Browser: DidCommitNavigation()

Output (Unicode)

 โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”            โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”     โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”
 โ”‚Rendererโ”‚            โ”‚Browserโ”‚     โ”‚Networkโ”‚
 โ””โ”€โ”€โ”€โ”ฌโ”€โ”€โ”€โ”€โ”˜            โ””โ”€โ”€โ”€โ”ฌโ”€โ”€โ”€โ”˜     โ””โ”€โ”€โ”€โ”ฌโ”€โ”€โ”€โ”˜
     โ”‚                     โ”‚             โ”‚    
     โ”‚  BeginNavigation()  โ”‚             โ”‚    
     โ”‚โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€>โ”‚             โ”‚    
     โ”‚                     โ”‚             โ”‚    
     โ”‚                     โ”‚URLRequest() โ”‚    
     โ”‚                     โ”‚โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€>โ”‚    
     โ”‚                     โ”‚             โ”‚    
     โ”‚                     โ”‚URLResponse()โ”‚    
     โ”‚                     โ”‚<โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”‚    
     โ”‚                     โ”‚             โ”‚    
     โ”‚ CommitNavigation()  โ”‚             โ”‚    
     โ”‚<โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”‚             โ”‚    
     โ”‚                     โ”‚             โ”‚    
     โ”‚DidCommitNavigation()โ”‚             โ”‚    
     โ”‚โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€>โ”‚             โ”‚    
 โ”Œโ”€โ”€โ”€โ”ดโ”€โ”€โ”€โ”€โ”            โ”Œโ”€โ”€โ”€โ”ดโ”€โ”€โ”€โ”     โ”Œโ”€โ”€โ”€โ”ดโ”€โ”€โ”€โ”
 โ”‚Rendererโ”‚            โ”‚Browserโ”‚     โ”‚Networkโ”‚
 โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜            โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜     โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜

Input

1) Renderer -> Browser: Message 1
2) Renderer <- Browser: Message 2

Renderer: 1<2
Browser: 2<1

Output (Unicode)

 โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”
 โ”‚Rendererโ”‚โ”‚Browserโ”‚
 โ””โ”€โ”€โ”€โ”ฌโ”€โ”€โ”€โ”€โ”˜โ””โ”€โ”€โ”€โ”ฌโ”€โ”€โ”€โ”˜
     โ”‚         โ”‚    
     โ”‚โ”€โ”€โ”      โ”‚    
     โ”‚Message 2โ”‚    
     โ”‚<โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”‚    
     โ”‚  โ”‚      โ”‚    
     โ”‚Message 1โ”‚    
     โ”‚  โ””โ”€โ”€โ”€โ”€โ”€>โ”‚    
 โ”Œโ”€โ”€โ”€โ”ดโ”€โ”€โ”€โ”€โ”โ”Œโ”€โ”€โ”€โ”ดโ”€โ”€โ”€โ”
 โ”‚Rendererโ”‚โ”‚Browserโ”‚
 โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜

Tree

Input

Linux
  Android
  Debian
    Ubuntu
      Lubuntu
      Kubuntu
      Xubuntu
      Xubuntu
    Mint
  Centos
  Fedora

Output (Style Unicode 1)

Linux
 โ”œโ”€Android
 โ”œโ”€Debian
 โ”‚  โ”œโ”€Ubuntu
 โ”‚  โ”‚  โ”œโ”€Lubuntu
 โ”‚  โ”‚  โ”œโ”€Kubuntu
 โ”‚  โ”‚  โ”œโ”€Xubuntu
 โ”‚  โ”‚  โ””โ”€Xubuntu
 โ”‚  โ””โ”€Mint
 โ”œโ”€Centos
 โ””โ”€Fedora

Output (Style ASCII 2)

Linux
 +--Android
 +--Debian
 |   +--Ubuntu
 |   |   +--Lubuntu
 |   |   +--Kubuntu
 |   |   +--Xubuntu
 |   |   `--Xubuntu
 |   `--Mint
 +--Centos
 `--Fedora

Output (Style Unicode right top)

โ”€โ”€โ”€Linuxโ”€โ”ฌโ”€Android
         โ”œโ”€Debianโ”€โ”ฌโ”€Ubuntuโ”€โ”ฌโ”€Lubuntu
         โ”‚        โ”‚        โ”œโ”€Kubuntu
         โ”‚        โ”‚        โ”œโ”€Xubuntu
         โ”‚        โ”‚        โ””โ”€Xubuntu
         โ”‚        โ””โ”€Mint
         โ”œโ”€Centos
         โ””โ”€Fedora

Output (Style Unicode right center)

         โ”Œโ”€Android
         โ”‚                 โ”Œโ”€Lubuntu
         โ”‚                 โ”œโ”€Kubuntu
         โ”œโ”€Debianโ”€โ”ฌโ”€Ubuntuโ”€โ”ผโ”€Xubuntu
โ”€โ”€โ”€Linuxโ”€โ”ค        โ”‚        โ””โ”€Xubuntu
         โ”‚        โ””โ”€Mint
         โ”œโ”€Centos
         โ””โ”€Fedora

Frame

Input

#include <iostream>
using namespace std;

int main() 
{
    cout << "Hello, World!";
    return 0;
}

Output

โ”Œโ”€โ”ฌโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”
โ”‚1โ”‚#include <iostream>         โ”‚
โ”‚2โ”‚using namespace std;        โ”‚
โ”‚3โ”‚                            โ”‚
โ”‚4โ”‚int main()                  โ”‚
โ”‚5โ”‚{                           โ”‚
โ”‚6โ”‚    cout << "Hello, World!";โ”‚
โ”‚7โ”‚    return 0;               โ”‚
โ”‚8โ”‚}                           โ”‚
โ””โ”€โ”ดโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜

Table

Input

Column 1,Column 2,Column 3
C++,Web,Assembly
Javascript,CSS,HTML

Output (Style Unicode)

โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ฌโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ฌโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”
โ”‚Column 1  โ”‚Column 2โ”‚Column 3โ”‚
โ”œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ผโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ผโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ค
โ”‚C++       โ”‚Web     โ”‚Assemblyโ”‚
โ”œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ผโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ผโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ค
โ”‚Javascriptโ”‚CSS     โ”‚HTML    โ”‚
โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ดโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ดโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜

Planar graph

Input

if -> "then A" -> end
if -> "then B" -> end
end -> loop -> if

Output (Unicode)

โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”     
โ”‚    if    โ”‚     
โ””โ–ณโ”€โ”ฌโ”€โ”€โ”€โ”€โ”€โ”€โ”ฌโ”˜     
 โ”‚ โ”‚     โ”Œโ–ฝโ”€โ”€โ”€โ”€โ”€โ”
 โ”‚ โ”‚     โ”‚then Aโ”‚
 โ”‚ โ”‚     โ””โ”ฌโ”€โ”€โ”€โ”€โ”€โ”˜
 โ”‚โ”Œโ–ฝโ”€โ”€โ”€โ”€โ”€โ”โ”‚      
 โ”‚โ”‚then Bโ”‚โ”‚      
 โ”‚โ””โ”ฌโ”€โ”€โ”€โ”€โ”€โ”˜โ”‚      
 โ”‚โ”Œโ–ฝโ”€โ”€โ”€โ”€โ”€โ”€โ–ฝโ”€โ”    
 โ”‚โ”‚   end   โ”‚    
 โ”‚โ””โ”ฌโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜    
โ”Œโ”ดโ”€โ–ฝโ”€โ”           
โ”‚loopโ”‚           
โ””โ”€โ”€โ”€โ”€โ”˜           

Thanks

This project has been possible thanks to these great projects