I use ASCIIFlow all the time. I still haven't figured out how to get browsers to render the monospace fonts correctly see example diagram on this page: http://uggly.bytester.net/#how-it-works
Looks fine on my machine - my guess is that your primary font does not contain all the glyphs used (e.g. the box-drawing chars), so its falling back to another font just for those glyphs, causing inconsistencies.
First is using a monospace font, second is aligning line height to font height. Third includes a bit of tweaking and trying different sizes.
Your best bet is to use a good fixed width don't with broad character support. Some are better or worse than others. Cascadia Code and Fira Code work pretty well with differing characteristics and both have nerd don't variants.
I believe you can treat it as if it were an image by putting it an element with attributes role="img" aria-label="description of the diagram goes here"
The problem is, having to describe a diagram using text defeats the purpose of the diagram. Must better is to use diagrams that render as SVG, so screen readers can read them. [0]
A flowchart involving labeled boxes with arrows between them is going to be more accessible as an SVG than a PNG, sure, but you're still going to need to explain what the arrows are doing, otherwise a screenreader user will be quite lost.
