AsciiGrid - A WYSIWYG Editor for ASCII Diagrams
Tags: showdev
Published: 2019-12-30 21:06:32

I like to use Ascii diagrams in my documentation, but they are a pain to edit in a traditional text editor. To solve this I wrote [AsciiGrid](https://mbarkhau.keybase.pub/asciigrid/#vvF;AOAOA;AeCCCgAjAoAeCBADAAASCYEJAGMFLFSCgNgAgADlVOFWHeCGfGfCgAKMfGXHhQgpghXCEAAECCCgAjAjAXCBAg_fiCiBEBeCCeCBXhZgPfCg8DgEAcF) over my Christmas break.

The mobile experience is probably not great and I haven't tested on Mac or Windows. If you have any issues, please report them or send patches to [gitlab.com/mbarkhau/asciigrid](gitlab.com/mbarkhau/asciigrid)

Here are some more examples from the [svgbob page](https://github.com/ivanceras/svgbob)

 - [Basic Shapes](https://mbarkhau.keybase.pub/asciigrid/#vvE;EOAOA;MCACAhAlAtA9ACMBRCAAAgAjApA1AhAMpBaDBRCgFECCCgAEhcjFMinoBAAfCcFm9NAKkQp8DjJDoAgBGlfHhBfCAAcFl_hDKMgCegQn-ECCCgAEgINjFgopAgJmBj7MgJAfh5Fm_AAOOOgAOiHiAmKqHixAAKMNhHfCAeFhCAaDBRgEiOjhchkiMchulHgGjRGCCCCeDgIDAelVFh8i_aDBRhEiInwiMi-AHkQhEAcDCCCChTDADAAeFg_j4WibaDBRg2k9izgZjLhigBOOOgAOjRmdg9ADAAg6agElNaDBgPi6qqhNlCkkfGMsBAARCAWFw7qcuAAAKMPPPPMzHaDBRC-imANMmCfEv1AMCCCgAiAimhQgBcDi0gKeDjMANiBAeFgbgBp_gFGmJhAHiBkNgKhcmCaDjScFhAt5ANCCCCCEAchDNkXKeDhXkGg1DhWgPMPPPPgacFAAWHt8jJDfoCnAxAh5hpyzN-biAOmAgHk-kRgQgCMCMiBkACkDmKhGNANhaAcCNAAKgcaDBRCgOGOHgBhBATDAhDUDAkBGAHUhQgjAViRiGAWidhGXgHgeaDBRChZhAiANCNgDKCkACNjEmKhGMOMhahFOchbo8OOOjDiGmDqAkIpEhARCBRChFcCNgDKMnCkGAMpBmUnHo_gFfhBYDhlFkHZhKiKjKiriKpFlKkHRCBRh5khj1mEiJGijDQDhEHgBiMgPRmJt_AKMOOOcCNmDlFcFlkfikoGlKt8hAh_OOpTAAKMhQMNqCOcClJq6hHmSKMr8rAyARCBRCiFfjBiAcFhCMCCCCCMhEhD-mhFDjJDSjDgDAAcFgCfClCjA8tm0lODiBg4fiX000zknjQk6AANlACCCClF7qAKMOOOgAc6U2uKPPPgAjApA1AuAN)
 - [Quick Logo Scribbles](https://mbarkhau.keybase.pub/asciigrid/#vvE;DOAOA;AAAAAMCCCMiFiAnAAAOBhCfCCfGCgDCkQMgumbDCDsnhbBAMgvAgAg7elagJg3cFlfHi3isgVicfhHcFBGAaCAgog-k2g7AfEAAHivAgDDj5DCeDDhMAGEGCaCCHHBANCMh7nycFgmfCfCjLgbaCiwgoCNCNhGcFcFgIfCBiJFg0l5gKNEgXnGOOnElANCCNi3ANsGgTAAMCCCCMslOiWDiAoMcgoGOHBgeODOOiAlqfCAMCMAcFBhvhZOOCCj4gxGgEHAHBAKCfCMaDaDhAMcFCNk7cFgZNOfCBAgGCCgACmUiOGOH)
 - [Grids](https://mbarkhau.keybase.pub/asciigrid/#vvB;COBOA;AAFCCCCFAAAgAlGBAfCjKcgXhEtAojCEjAiBFBElVgOgTqBFjGDjApA54kFBAck5fCjCtAcFiCDjApAjaimkArAkABAAECCCCElnrAgGkMCjAkFqhrNjABAfCjdcFjCtAfCiCDjApAjalZkArAfCBEkgAECCCCrAgLhIDjApAoaCjApAEBAcFjdfCjCtAcFj8vqkgkArAkABAAGnigAg4pChBDiGjAmDkjCjApAEBl2cFjCfCtAz8hIlVkArAfCBj8gAGCCCCGrAoBCEjAiBgkvDkFBBBBiyHHHlAiDAFjfhAlACFmRsHhPgEjCBAHHHfCgMcFnAi2DhAlAoBAgiggjApAi4hiECCCEhIBiOcFHHHnAiFkehAlAkuxAjnlABw_gHhkADhAlAoBhcgljApAh0ihECCCEhIBgThsHHHnAiFkehAlAkuoPnMkAjCBw_gHi3DhAlAoBAgiggjApAi4hiECCCEhIBhrcFHHHiXnAAAGhghAlAgBGkRtEiQlVG)
 - [Graphics Diagram](https://mbarkhau.keybase.pub/asciigrid/#vvC;BOBOA;AAAQDgCgAATlBkApAQFALBhFLCCCgACLjSEZHxbcFBARDAfCDhKSmBgAybisALCCCgACLAlllAmfWHQhYgtmITDg4DADUiUgGXiEhHUcVCeWVCs2LCCCCcFhCCLi4iNCDCLibZTZCAEiOGAEYHlwfCjCWHAYFgFcFh5lOmAglAUh-lwrwAAKiBi5LCCCgACLkUWHsnpslAg3AVDlqhFgAEamykSHRDALCCCgAjAjALgXSDBBBrhkAMvACMFl0lMKBVEZHVGAfmKAHiBoGlAYChSZCASFVGWGSHRGTGUHZGKeGkscFBgGEghmtcFjVkvcGVrogANCNnmiAhsg3Bm4lRgKWHseiADtBKCCCCCKi_iMiLgALlBqiWH)
 - [Sequence Diagrams](https://mbarkhau.keybase.pub/asciigrid/#vvE;EOBOA;AAAgAjApAkAMCCCeDAAWEBkLREkCShFgATEAAUhRAAfCleag1gACCgGkAiAnIeDAAVElokAAAcFpCeFgOuTAWHnCfCgCNCCCeDAAXv-AASEAhaATEACNBBwPiAcCCM1EKg20EfCDcFjXh-CCMqSDkUDSEfGSGDrtAmyKCECNoRREcGZGTGVGkaAADhBYgPcGcGfGkOnVCCCgAjACCeDoQlBlIoPAZETHAZGUHAfGbGfhopVcDCACAhAjAhXhVcCCECMlfgAREcGZGTGVGkbDSEfGSGDoZhyMkYKCCCNpQKCNkUpKiAfCDcF1FAD3dAg0BpTMQQVCMlpgAGAQDAHpXKCNjJk8hDcFjcnIkNiFWFmnWiQgAMQQVCMmPjJhtAAGARDAHkSGAUgKkuKCNmphIhtAAfCgCcFmRDiJKMBlUlWkWiJhbAWiwgAmAhbibi7MQQVCMjUjGnkkAgDBGASDAHhJGATkDlnmAkCBAKhENi9mDh2Vg3gEWjBXgEBjfjAplmAmA)
 - [Plot Diagrams](https://mbarkhau.keybase.pub/asciigrid/#vvB;AOAOA;AAAgAAASbVCBhFVFZGeGAaQVCgLFCCCgAjApAinhAkiDuAnHhsGUgUhAlAtA9A9AWbVCBBAAAAAVFUGTGSgOBSCjHHPbESCaglidAFCCCgAjAmAj5gAhliEfgEJsIjQpLh4GUgahAlAJtBtA9ApAWbVCBAAAgAjAiAJLCCCCCMJmSSglnWVDQDQDdGTHAnZaQpXjAJBTEQHVHFRFfGeGifUhAlAtA9AgBFCCCgAiABAAAgAAAagWlElADAAZEeGRGTGUHZGWHVGqjhEREnTkvnaCCCgAjAiAGUg0hAlAtApAWbVC)
 - [Railroad Diagrams](https://mbarkhau.keybase.pub/asciigrid/#vvE;GOAOA;AAAgAgAcQVCCCgACQRVCgOMCMlOiOBAAfGCCeWiNDAVGcGVGdGADCCGAbDAHgSeiKdWVggfGgwAAADgBUg_hzCCYgHgOKCNlOjNADlmj4hVeDkBgPiYjclhDhDcQi-Qi-hStYQXVCCfg-CdhBCDAYHADCCehPiYh8iAgjCjvDhAAAURhbCYRVCjOiYhADqbAMCMkDtShaKCCGAcCAHCCNpXeFnahEKrRq5AdWVCCCgAgAeDnBgUrbgAAcQioQRVCgLMCMkVmfQXVhcgDCdg-CDAYHADCCGAcCAHCehQfhBgjhEjwiADAURh5CYRVCgNKCNgSoWKixCCcDjCNoRnAqAMksiAekxmIMBigcQVrKQRVCg5CMh_gDADmcsPk0lNhluKiXBfEOOOODATHUHSHVHTGUHOeGRGdGVGADOGAaDAHgEhCedVChpvOgSUHQHiOOOfijkugYSGfGUGZHiYhcEBAAdgiAAURVCCCgAjACCYRhTKCNAjAAAcgmlgpVgYk3lNdhmgUtOkYcgcBAADieiAnAoAtQiAMCM1DADB-zKCCCgAjAcDjCGAcCAHCCN_28-rAK06hADBhcCCgAjApA1A9AN)
 - [Statistical Charts](https://mbarkhau.keybase.pub/asciigrid/#vvD;DOCOA;AAVEAECCCgAjApACagBEAAAiiDiEiAnAiAfGBAAIAD0rhADhDioglyuhAAgZgEBAAHAgvu3ibgAjAg0gk1vkgBAAGAD4rjAg5gk2tjABAAFAEk-CCEgAjApAi9hjfGChACDgAjApABijAVDAKJAKgELJALgEMJAMgEUDJgBgGVgGjl-LhpBBBBYgJNWDXgXSVCm2mAvAgAdWVCegBBXDYDNLJ1kxoSQVChA65JNXDM1_56n8mAnIoSiFfgBQXgBg2hSBWDMNLXDAUSipgAjApAn5oGl6ASgGhAiRfgBQXjUhRhIhmpMhktQlcAAAhThfBVDVDNYDJAUSiUlwgIgAjAiAlRh2l2iklBnwhbAQXVCQgGfgQpAjZieAnCpIgAhthpBUDYDNMMAUSiXhfhYegZjkdgHQhSgBnMhkhAlApslEfkFjojygAlTpAlABUDJNYDXDAUSVCdgPegBj6hghKmNAhGhyAiXQgipUhEhQhehclAhEisrtljBMMNUDJAUSVCSgRhAAiAmshEegFdgBj-AAiehAldBLVDNZDMq8qlliiImFBKYDNUDXDAcTjMl1BKKNJJAUSg9mlj3URVCQgghAlAtApAUT-C1Y-O1Y-_-K3WBAAAALJKKhEjGKLoBMoBUDoCVpBWD)
 - [Block Diagrams](https://mbarkhau.keybase.pub/asciigrid/#vvB;FOBOA;AWHeGTGWHZGVGXHVGSHAAAgAgAFCcCYCAAZgFCFBAAHHAApThZlGZggnEAXGRGUHVGXHRGZnqAAWHeGTGTgYSHWiBBAbFHHdFDKDAACCCCMYChmZGei_SgvVgHiPhcifAHHHgAhAiwhPiIAAHHBfCWTYhACAfCDHDh4hAGCgPlFAZCFCGlFbFHFFFHhBQLdFkPg3gCADKKDBnvnAGCFYCr7xTgADHHHHDADgHy18gmAfCWTYhAiDgMADHHDBBB2ZORGcGWHVgDVGTHTHACCCgACCFqooAQFVHcGTgxagxUHAVGeGXGZgDVGhdfC1jvAOyWjAHHHgAgAFCCCgAjAjAEmvkAFmSG34AfCAAlgMl7oRFkVFHHHgAgAvycFgCUHYGSHVHTHUHCCMBqVYChAjGHHHgAgAgJQGCCCgAiAfjHCEAAlLs4AcFktCGmLsADskkpCCFHAAHHNHHHFiK3YnQDgbwEisnGWGVHVGcGAAHHNjvANHHTHQHRGSHbgWlyXEeEUEi7mMZGeGUgnbGVilk7gGQHcGVHXn2ADrtoAmssI7T1ZtGHHHHhtQGCCCgAjAFqlqkfCAFgfGsID3YDkWycrHECEChAgBBshFCCCDADgDFgLHH8rDCECEhACDBpMHHHgnjUCDCCfGAAQGCCCgAgAajBgWmKgAPhrhACDBAAFkPMAHHHAADDDgADADAAQHfGXHVGSgUAgAAhRgDakrz6AcFlnitDDDgADh4THXHZGUHTGYGmXjAoogMCECEhACDBiMXFRg0VGSHiKQGmYGpsECCfGCCCiCCEpOmoEBiMZGeGUHRGbGVGkdYEYEPopjADpAj2pTXEVGeGVGSHRGUHfgFsuEiECr7ATFfGcGRgsAQg3h_cGBpWpArAECCCgAiAEqn6aSERGUHUHVGSHZHBkyhAKKKgAKoHhPKKAATgndGSGfGcGZGTGARGeGh-egFRGpmgwq1gOrBDsAnBdGZGTGSHfGAYGVGegIZH2VTGfgtcGAXHfCUHVHegMeGXGAcGVHXGsqhBFCCCCFsKgBYCFCGZCAD4A4AjNQHZGTGfGAWGRGSHRGUGATgIQH0kjFAHHHhNUHSg_dGdh6GcGVGZCvnitjEg1DBgGQFTEgECMAAFCCCCGhBCgDhACGhfSEfGRGSHUGh6QjciAmAhjhZiAXgpfGVHeGUGAQHcg6eGVGAYCWGfGZGcGZC)
 - [Mindmaps](https://mbarkhau.keybase.pub/asciigrid/#vvF;GOBOA;AAAgAjApArAeCCCeDAARENQHMHB-QgAfCwVvAeCCCCCeDAAZEIJGJHNASFFNFHKFBhcQFNHIIJIXGAaimhqCq2fkIgAcjvqSkSzbAAXCCCCeDAQFHGPMARDBZEIJGJHNALFKFHLgSq3uxhWBnDatMzeAAXCCCeDAAQFHGPMASDo6ntoEAAfgwgAhAeDASEFGHppxiAfCqWtUfGgAqFnRFfFhAjAr4m_hAeCCCCeCAaiCjpr8Cmts4AXh4h0DAYhiAAZlllTfEhaAeCASFFNFHKFgJt4nAQGgxXCAfGwKcFfFfhAlA4ug_hAgAcFqZqYChCcFgAlftTeCCCXiiuYw4kGjjXg4CCECeDAAQFVHKMASGHPbGKn3zql6jFFBwbDrDolXCCCCCeDATFFGSGHPbGKm5n3Aszj9BsGWFgotahnXCCCgAeDASFFPFQHGJfGIl3gAUFFHdGAg8Auvg_ofiAWHgnvXofXFfGLbGNHfGOgpAeCvcAXCCCeDeDATEHLFFLAPMHIXGm8lgWFAfClNhAQFUFfEAsHjlpcSEVHXG)
 - [Circuit Diagrams](https://mbarkhau.keybase.pub/asciigrid/#vvD;BOBOA;AAAgAEKJCKVDWFjJiAPPPJcCJUDXDSFBiOaCCCgAhAfGkACDgmDiLkNlXmcCCNg9AEADgDgAgAiFjAjIqOnQDh1CdDdDdDCjNPDPqVANEN-ajNNCgopwDgBLbGL7fhNUDXDJDAEuumEl7AAPDPi6mhVHWEicAOCCNilAOEOkXNENnycFAfCAcEVEIBiMECCCgAgAfGkqADWDhCXDADYhGAKbGAgKn9CECj5krPPPDgBgHNgYCCgCgACNiYqtADqsACQVVhAiDCjpoUhyAAOEO3oAAiytpKl4DfCAAGHqtkAXEeEIvqECCCgAfGCCEgMVDUDXDwslAqwhliCADQGekH2irtiBcCENn_g3rkNCCCgACErsLLJSFDixfGhcDDCEAAZESFWEZDaFMUt6holAo-jAhZhAADECe2hAAdEHMUDJWDMm0QGEOm1DCE3jrHlsmYAAGZFWFLZiSACKLWFWD13w8OCCCCOkNfGCCDcDChEChCCYFAfEVFUFBWDJJJAdGZGTGSHfGAACADAEizDk5jHLpCkNjAiABWERg-RGUGcCAUDJWFAPPPDgBPPt8CCfGt9HDiWiABHRGQgBTGZGUHfGSHAAeHgAjAhCjkl1DAXEeEImHMJVHYEAAHDjYAACCCAUDXDJBpsjWlAmMDMjCKeGWEmNHhoisTCTCTCAAVHWE14pJDCCCgACDDCCNoejAgC1uOiyEiACOsSgAXEeEIlpiI0yiAVDhjUiB0MAD5lgpgCOCCCgAjACfGsA-frTmAPPPgeswQGCCCgAjACakBfCcFhAfqRfGCCDPPPDCOs4rAlALbGrDDkBKbGJB-euANEN3d3dDADAVDbGWDAEAMbGM3r7nZGeGATFVGSHZGVG3t3tOEO3d4dDB-CuAXEeEI)

I hope you find it useful, cheers.