How to spice up your markdown documents

#ascii #markdown

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.

  ______                                 _____  _____ _____ _____   _    _                _ _             
 |  ____|                         /\    / ____|/ ____|_   _|_   _| | |  | |              | (_)            
 | |__ __ _ _ __   ___ _   _     /  \  | (___ | |      | |   | |   | |__| | ___  __ _  __| |_ _ __   __ _ 
 |  __/ _` | '_ \ / __| | | |   / /\ \  \___ \| |      | |   | |   |  __  |/ _ \/ _` |/ _` | | '_ \ / _` |
 | | | (_| | | | | (__| |_| |  / ____ \ ____) | |____ _| |_ _| |_  | |  | |  __/ (_| | (_| | | | | | (_| |
 |_|  \__,_|_| |_|\___|\__, | /_/    \_\_____/ \_____|_____|_____| |_|  |_|\___|\__,_|\__,_|_|_| |_|\__, |
                        __/ |                                                                        __/ |
                       |___/                                                                        |___/

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       │   │
    │                                  │               │   │
    │                                  │               │   │
    │                                  └───────────────┘   │
    │                                                      │
    └──────────────────────────────────────────────────────┘

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

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     |
'--------'--------'

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

DEV Community

How to spice up your markdown documents

Fancy ASCII heading

Diagrams

Insert images

Tables

Folder structure

Latest comments (0)

Read next

Enhancing Note-Taking Efficiency: Neovim, Markdown, and Git/GitHub

Transforming Images into ASCII Art with Python and OpenCV

Create Your E-Book: Converting Markdown to PDF, EPUB, and HTML

Create a Gantt Chart With Markdown