Here is an example of me using a code block in Wordpress but setting the max width:

https://cs.joshstrange.com/r3pM1Vzs

Here is how it looks rendered on desktop:

https://cs.joshstrange.com/dvX5qKvf

Here is how it looks on mobile (broken):

https://cs.joshstrange.com/pHNdKLxH

It will work if I set a `style="width: 1200px;"` on the `<pre>` tag (edit as html):

https://cs.joshstrange.com/1zTrXZGM

But then Wordpress is going to complain:

https://cs.joshstrange.com/ctGRh46j

You can always convert the block to HTML so it stop bugging you which will look gross in your editors but work when displayed:

https://cs.joshstrange.com/8FPgPBXp

I hope this helps!

Thanks! This is really helpful - I’ll try this out soon.

Either of those options should work for you. Code blocks are almost always rendered with monospace fonts and manually setting a normal block of text to a monospaced font will do what you want as well.

The only other issue I can see is if your diagram is too large it might start wrapping which will break the “image” you are going for.

EDIT: See my sibling comment for examples of how to do this.