DEV Community

Cover image for How to spice up your markdown documents
Allan Simonsen
Allan Simonsen

Posted on • Edited on

How to spice up your markdown documents

Some find markdown documents boring because you can only work with characters and don't have much control over the look and feel of the layout of your document.
But even when you are restricted to only using characters for writing and illustrating, there are actually a lot of different tools out on the Internet for making interesting and useful documents, blogs or documentation.

Fancy ASCII heading

In some cases a fancy heading can catch your readers attention. The online tools below lets you choose between different kinds of fonts. Just write your text and copy the generated ASCII art into your document.

 ______ _____ _____ _____ _____ _ _ _ _ | ____| /\ / ____|/ ____|_ _|_ _| | | | | | (_) | |__ __ _ _ __ ___ _ _ / \ | (___ | | | | | | | |__| | ___ __ _ __| |_ _ __ __ _ | __/ _` | '_ \ / __| | | | / /\ \ \___ \| | | | | | | __ |/ _ \/ _` |/ _` | | '_ \ / _` | | | | (_| | | | | (__| |_| | / ____ \ ____) | |____ _| |_ _| |_ | | | | __/ (_| | (_| | | | | | (_| | |_| \__,_|_| |_|\___|\__, | /_/ \_\_____/ \_____|_____|_____| |_| |_|\___|\__,_|\__,_|_|_| |_|\__, | __/ | __/ | |___/ |___/ 
Enter fullscreen mode Exit fullscreen mode

Diagrams

Sometimes a diagram can tell more than a thousand words. You may need to illustrate flows or database table relations.
I found these online tools for drawing diagrams:

 ┌──────────────────────────────────────────────────────┐ │ │ │ ┌───────────────────┐ │ │ │ │ ┌───────────────┐ │ │ │ Diagram box │ │ │ │ │ │ ├───────────► │ │ │ │ One │ │ Diagram box │ │ │ │ │ │ │ │ │ └───────────────────┘ │ two │ │ │ │ │ │ │ │ │ │ │ └───────────────┘ │ │ │ └──────────────────────────────────────────────────────┘ 
Enter fullscreen mode Exit fullscreen mode

Insert images

Images can actually be converted to ASCII art. Online you can find a lot of different image to ASCII art converters. You just have to accept that you can't have the same high resolution images in your markdown documents as you can in PDF or Word documents.

Here are a few randomly chosen online tools from a Google search

MMMMMMMMMMMMMMWKOkkkk0XWMMMMMMMMMMMMMMMMMMMMMMMMMM MMMMMMMMMMMMKdc:::;;;::cxKNMMMMMMMMMMMMMMMMMMMMMMM MMMMMMMMMMMK;'coddddddo:'.lNMMMMMMMMMMMMMMMMMMMMMM MMMMNKkkOXWx':dddddddddd;.,0WX0OOXWMMMMMMMMMMMMMMM MMNk:;;;;:c,.:dddddddddd,..:c;;;;;cOWMMMMMMMMMMMMM MKc':odddoc,.'lddddddddc...;lodddo;,dNMMMMMMMMMMMM K:'lddddddddc''lddddddc.':ldddddddd:'oNMMMMMMMMMMM o'cddddddddddl'.,;;;;,.,oddddddddddd:'kMMMMMMMMMMM c'ldddddddddo:';oxkkxl,,cdddddddddddc.dMMMMMMMMMMM O:,:ldoooooo:'oKXXXXXX0c',cdddddddl:,cKMMMMMMMMMMM MXo'.,;;;;;,.;0XXXXXXXNk' .;;;;;;'.,xNMMMMMMMMMMMM Xo;;:loooool,,kXXXXXXXXd'.;c::::cc;;:kNMMMMMMMMMMM l'cdddddddddl,,o0KXXKOl,;loddddddddo;'xMMMMMMMMMMM c'lddddddddddl'.,:cc:'.;odddddddddddc'xMMMMMMMMMMM O,,oddddddddo,.:oollol,.:odddddddddl':KMMMMMMMMMWM Wk,,odddddoc'.cdddddddo;..,lddddddl':KMWXOkdollcck MW0c,;cc:;;'.:dddddddddo,..',:ccc;,oOklc:;;::cl,'k MMMN0dlloxKd'cdddddddddd;..,,.:lldOd;,:lodddddo':X MMMMMMMMMMMO,;dddddddddo,..,:;oNMXc'cddddddddd;'kM MMMMMMMMMMMWk:;;::::::;,cdOo;;;kNl'cddddddddd:'dWM MMMMMMMMMMMMMN0xdoooodkKWMMK:;;cx,;ddddddddl;,dNMM MMMMMMMMMMMMMMWKxollllloxkONx;;;;''::::::;;;lOWMMM MMMMMMMMMMMWKdc;;:clllc:;;;::';;:kkdoooodxOXWMMMMM MMMMMMMMMW0l;;coddddddddddo,'';;:KMMMMMMMMMMMMMMMM MMMMMMMW0l,;ldddddddddddoc,,ko;;:0MMMMMMMMMMMMMMMM MMMMMMMXo,,;clodddddddo:,'c0Wd,;:KMMMMMMMMMMMMMMMM MMMMMMMMWXOdlc:;;;::;;;ckXNMWo,,cNMMMMMMMMMMMMMMMM MMMMMMMMMMMMMWX0kxddxOXWMMMMXc,,dWMMMMMMMMMMMMMMMM MMMMMMMMMMMMMMMMMMMMMMMMMMMMO;,;kMMMMMMMMMMMMMMMMM MMMMMMMMMMMMMMMMMMMMMMMMMMMWd,,cXMMMMMMMMMMMMMMMMM MMMMMMMMMMMMMMMMMMMMMMMMMMMKc',xWMMMMMMMMMMMMMMMMM MMMMMMMMMMMMMMMMMMMMMMMMMMWx,'cXMMMMMMMMMMMMMMMMMM MMMMMMMMMMMMMMMMMMMMMMMMMMXc.;OMMMMMMMMMMMMMMMMMMM MMMMMMMMMMMMMMMMMMMMMMMMMMNl'dWMMMMMMMMMMMMMMMMMMM 
Enter fullscreen mode Exit fullscreen mode

Tables

Markdown natively supports tables, but if you want to make a custom ASCII table, or if you are not quite comfortable generating your markdown table by hand, then you could try one of the following online tools. Some of the tools below also support converting CSV files to markdown or ASCII tables.

.--------.--------. | Row 1 | Row 2 | :--------+--------: | 42 | 43 | | 43 | 44 | | 44 | 45 | '--------'--------' 
Enter fullscreen mode Exit fullscreen mode

Folder structure

Sometimes you need to document a folder structure in you text or Markdown file and on for this you can use the tree command. Its build in on Windows and on Linux you can install it using sudo apt install tree if you havn't already have it installed.

$ tree Folder PATH listing for volume Data Volume serial number is C0000100 DCB8:8751 D:. ├───subfolder1 ├───subfolder2 │ ├───subsubfolder1 │ ├───subsubfolder2 │ │ └───subsubsubfolder1 │ └───subsubfolder3 └───subfolder3 
Enter fullscreen mode Exit fullscreen mode

Top comments (0)