We all have been looking for a way to create Flowcharts for our projects.

Today, the search is over, as I will show you have to install Drawio.

And also a small surprise for Python & DevOps lovers - Mingrammer/Diagrams: Diagrams as a Code

The DrawIO Project

You can find the Drawio project details and source code at:

Self-Hosting Drawio

You will need just one thing, get Docker installed in your computer (or server).

It’s simple - Get Docker! 馃憞

Important step and quite recommended for any SelfHosting Project - Get Docker Installed

It will be one command, this one, if you are in Linux:

apt-get update && sudo apt-get upgrade && curl -fsSL https://get.docker.com -o get-docker.sh
sh get-docker.sh && docker version

Drawio with Docker

And this is the Docker Configuration file that we will use to deploy Drawio (together with a DB):

version: '3'

services:
  drawio:
    image: jgraph/drawio
    container_name: drawio
    ports:
      - "8080:8080"
    restart: unless-stopped

If you are using Docker with CLI, just create the file with the content above and spin Drawio Service with:

nano docker-compose.yml
docker compose up -d

You should see that everything ready and DrawIO working at: localhost:8080

FAQ

F/OSS Diagram Alternatives - Mingrammer

If you are somehow familiar with Python, there is a library that you need to know: Diagrams

It is F/OSS that allow us to create Diagrams as a Code:

How to use Diagrams as a Code

Install it with:

pip install diagrams

And create your diagrams: example customer_remote.png diagram

from diagrams import Diagram, Cluster
from diagrams.custom import Custom
from diagrams.onprem.database import MongoDB
from diagrams.onprem.analytics import Metabase
from diagrams.generic.storage import Storage
from urllib.request import urlretrieve

# Define the URL for the Python icon and the local file name
python_url = "https://github.com/abranhe/languages.abranhe.com/raw/master/languages/python.png"
python_icon = "python.png"

# Download the Python icon from the URL
urlretrieve(python_url, python_icon)

# Specify the desired output filename
output_filename = "./your_workflow_diagram"

with Diagram("Python to MongoDB to Metabase Workflow", show=False, filename=output_filename):
    custom_icon = Custom("Custom", "./DHT11.png")
    python_code = Custom("Python Code", "./python.png")
    mongodb = MongoDB("MongoDB")
    metabase = Metabase("Metabase")

    custom_icon >> python_code >> mongodb >> metabase

You can also use custom icons with diagrams.

Diagrams in Github Pages and not only - Mermaid.js

I recently discover the existance of Mermaid.

A great tool for generation of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown. We can use it to create Diagrams from code together with other tools:

  • Markdown
  • Github Pages, together with a SSG like Hextra
  • Gitlab or Gitea (F/OSS 鉂わ笍)

We can use it even with F/OSS note taking apps like Joplin.

There is a live editor of mermaid if you want to try it: https://mermaid.live

What other F/OSS Productivity Apps you recommend?

You might want to have a look to these tools:

You can install/deploy any of those in a very similar way to what we did with Docker with Drawio.

How to Deploy Nginx Proxy Manager

If you are interested in using Drawio with https, deploying NGINX with Docker will be a great option for you.