Improving plaintext specs

You've decided to be more efficient and content-focused by using good tools for plain text authoring of specs. Today, we're going to take things to the next level.

My general stance is that emacs is a crazy powerful editor, but Visual Studio Code has nicer integration with more visually rich views of data.

While I don't mind reviewing sequence diagrams and data flow diagrams in text form, I acknowledge that it's easier to follow some things when they are spatially arranged. So, if Visual Studio Code is my tool for more visually interesting tasks, can we use it to have an easier workflow and still get rich diagrams?

Of course.

Markdown in Visual Studio Code

The starting point for understanding the built-in functionality is Markdown and Visual Studio Code.

In fact, right there you will find a section on extending the markdown preview, which is exactly what we want to do.

As an example, the Markdown + Math extension supports LaTeX math, which can be quite handy if your spec includes some interesting math expression. If you're curious, the sources are here.

But wait, you don't actually have to run off and write your own extension (although it can be a handy skill to develop).

Diagrams in Markdown

Here are the extensions you'll want for this.

Some changes if you choose to go with mermaid:

Mermaid has nicer rendering, but it's not as broadly supported as just pasting in a plaintext render of your sequence diagram. Things like pull requests and the like will likely have more trouble. If your workflow is more centered around Visual Studio Code.

Happy diagramming!

Tags:  designwriting

Home