[5 Mins Docker] Create Own Drawing Websites (Mindmap, Draw.io, Excalidraw) in Free Web Service Providers (Koyeb, Fly.io, Render) – 51 Security

Simple-mind-map is a simple and powerful web mind map library, not dependent on any specific framework. Can help you quickly develop mind mapping products.

Features

Pluggable architecture, in addition to core functions, other functions are provided as plugins, which can be used as needed to reduce packaging volume
Support logical structure chart, mind map, Organizational chart, directory organization chart, timeline (horizontal and vertical), fishbone chart and other structures
Built-in multiple themes, allowing for highly customizable styles, and supporting registration of new themes
Node content supports text (regular text, rich text), images, icons, hyperlinks, notes, labels, summaries, and math formulas
Nodes support drag and drop (drag and move, freely adjust), multiple node shapes, Support for expanding node content, and fully customize node content using DDM
Support canvas dragging and scaling
Supports two multi node selection methods: mouse button drag selection and Ctrl+left button selection
Supoorts to export as json、png、svg、pdf、markdown、xmind、txt, support import from json、xmind、markdown
Support shortcut keys, forward and backward, correlation lines, search and replacement, small maps, watermarks, scrollbar, Hand drawn style, and rainbow lines
Provide rich configurations to meet various scenarios and usage habits
Support collaborative editing
Support demonstration mode

Draw.io

Excalidraw

Play with Docker – labs.play-with-docker.com

https://labs.play-with-docker.com/

Copy: Ctrl+Insert

Paste: Ctrl+shif+v

Command:

docker run -d -p 8081:8080 shuiche/mind-map:latest

Output

[node1] (local) [email protected] ~
$ docker run -d -p 8081:8080 shuiche/mind-map:latest
Unable to find image 'shuiche/mind-map:latest' locally
latest: Pulling from shuiche/mind-map
d25f557d7f31: Pull complete 
3c61ae309c19: Pull complete 
5ec9143f6e67: Pull complete 
fa2a49c6cde3: Pull complete 
b0f4ae04fda8: Pull complete 
Digest: sha256:02b3ff8cc47c07401e6e74d0a52b24f448b6aed447329a82770c32e6eb5f6669
Status: Downloaded newer image for shuiche/mind-map:latest
747525d65e7265621f756c6a98806c0d8d114a5ac81348d26cc9d5111a0dd3ac
[node1] (local) [email protected] ~
$

Deploy to Koyeb Free Plan

Koyeb is a developer-friendly serverless platform to deploy apps globally. No-ops, servers, and infrastructure management.

Free Tier Plan:

One free web Service in the Frankfurt or Washington, D.C. regions with 512MB of RAM, 0.1 vCPU, and 2GB of SSD.
One free PostgreSQL database limited to 50 active hours, 1GB of storage, 1GB of reads, and 1GB of writes.

You can join the Hobby plan without adding a credit card. The Hobby plan can deploy a single web Service and database for free with the specifications mentioned above. You can add payment information (and continue to enjoy the free Service and database) to access the full platform experience.

1x free Web service
1x free Postgres database (50h)
Run web apps, APIs, and workers
Git push to deploy
SSL and 10 free custom domains
3 users included

If you have Github account, you can log in with your Github account for free. But you do need provide a valid credit card to enable your free account to use. Check free tier usage at :

https://app.koyeb.com/auth/signin?next=%2Fsettings%2Fbilling

After you created and enabled your free account, you should be able to log in and start your Koyeb journey.

1 Deploy a new project on Koyeb

Choose Docker as your deployment method.

2 Enter Docker Image path

shuiche/mind-map:latest

3 Configure Service and Deploy

Based on region’s latency to choose either Washington, D.C or Frankfurt.

Choose your instance, Since we would like to use free tier, we will choose Eco type free instance (0.1 vCPU, 512MB RAM, 2000MB Disk) :

Choose proper port.

Since this docker is using port 8080, we are going to change default port from 8000 to 8080.

Final configuration before the deployment. change from a random name to a meaningful name such as mindmap:

4 Deploy and test

Installation Pre-requirements for Own VPS

Free resources you might need to complete this docker project:

Pre-installed services:

Docker,

apt update
apt install docker.io
apt install docker-compose
apt upgrade docker.io
mkdir /root/data/docker_data/<docker_name>

Docker-Compose (Using Ubuntu OS for the commands)

Docker-compose down
Optional command : use following command to backup your Docker data. You might need to change your folder name based on your docker configuraiton

cp -r /root/data/docker_data/<docker_name> /root/data/docker_data_backup/<docker_name>

docker-compose pull
docker-compose up -d
docker image prune

Portainer (Optional)

docker volume create portainer_data
docker run -d -p 9000:9000 –name portainer –restart always -v /var/run/docker.sock:/var/run/docker.sock -v portainer_data:/data portainer/portainer-ce:latest

Install some applications: apt install wget curl sudo vim git (Optional)
aapanel with Nginx (Optional)
Nginx Proxy Manager (Optional)
Install screen (Optional)

Install screen (Depends on the Linux Distribution if it came pre installed or not) : yum install screen
Initiate a Screen : screen or screen -S <screen name> <command to execute>
Detach from the screen : “CTRL+A,D” not “CTRL+A+D”
List all the screen currently working : screen -ls
Reattach to a screen : screen -r <session number> or screen -r <screen name>
Kill specific screen: screen -X -S <screen name> quit
Kill all screens : pkill screen

Monitoring Usage

Remove Docker and Related folders

docker stop <Docker Name> # stop the docker but not remove anything.
docker rm -f <Docker Name> # remove speficic container, but will not delete mapped volumes
rm -rf /root/data/docker_data/<Docker Mapped Volumns> # remove all mapped volumes

Deploy to your own Docker VPS

Command:

docker run -d -p 8080:8080 shuiche/mind-map:latest

Draw.io

docker environment installation commands:

curl -fsSL https://get.docker.com | sh && ln -s /usr/libexec/docker/cli-plugins/docker-compose /usr/local/bin

docker run commands:

docker run -d –restart=always –name drawio -p 7080:8080 -v /home/docker/drawio:/var/lib/drawio jgraph/drawio

Github

https://github.com/jgraph/drawio

Demo

https://app.diagrams.net

Excalidraw

Demo

https://excalidraw.com/

Github:

https://github.com/excalidraw/excalidraw

Docker:

https://hub.docker.com/r/excalidraw/excalidraw

docker run --rm -dit --name excalidraw -p 5000:80 excalidraw/excalidraw:latest

docker run -d --restart=always --name excalidraw -p 5000:80 excalidraw/excalidraw:latest






[node1] (local) [email protected] ~
$ docker run -d --restart=always --name excalidraw -p 5000:80 excalidraw/excalidraw:latest
Unable to find image 'excalidraw/excalidraw:latest' locally
latest: Pulling from excalidraw/excalidraw
3c854c8cbf46: Pull complete 
de5d475193dd: Pull complete 
b407bcc80638: Pull complete 
da33b1ad0ac4: Pull complete 
a0fbd691d7c1: Pull complete 
16eaaaf5f1c0: Pull complete 
5e845cc16269: Pull complete 
1a09de43503c: Pull complete 
Digest: sha256:dd998e7dc83ca0a14327a71cdbb9dd86c1ed2ceef715cae349e084e0ae6aebb4
Status: Downloaded newer image for excalidraw/excalidraw:latest
979850bae2e8f2d0277ff502da736c392c15800817f94d4896b809c7c69fd323
[node1] (local) [email protected] ~
$

Excalidraw Animate

https://dai-shi.github.io/excalidraw-animate/
https://github.com/dai-shi/excalidraw-animate

https://www.screentogif.com/ – to record screen animation to GIF file.

tldraw –

Demo

https://www.tldraw.com/

Doc:

Fly.io Deployment

https://fly.io/docs/about/pricing/#free-allowances
New sign up for fly.io will have to pay $5 to stay a Hobby plan after you used up $5 free trial credit. But Legacy Hobby Plan still has no monthly subscription fee.

Free allowances. Resources included for free on all plans:

Up to 3 shared-cpu-1x 256mb VMs
3GB persistent volume storage (total)
160GB outbound data transfer

1 Sign into your Fly.io account by typing flyctl auth login

PS C:\Users\WDAGUtilityAccount> flyctl auth login
Opening https://fly.io/app/auth/cli/8e426809a69c7d38e2ca77e0f62ae57 ...

Waiting for session... Done
successfully logged in as [email protected]

2 Install flyctl if you are using Windows machine.

For other OS, check installation guide. The fastest way to get up and running is by installing the flyctl CLI.



# Install flyctl on Windows
PS C:> powershell -Command "iwr https://fly.io/install.ps1 -useb | iex"

3 Close CMD or Powershell terminal and open a new one to continue next command:

For more details, check out the Install flyctl documentation. Run the following commands from your project root directory to launch an app:



PS C:> flyctl launch
PS C:> flyctl storage create

Here are some CLI commands :

PS C:\Users\john> fly launch
Scanning source code
Could not find a Dockerfile, nor detect a runtime or framework from source code. Continuing with a blank app.
Creating app in C:\Users\john
We're about to launch your app on Fly.io. Here's what you're getting:

Organization: Johnny Netsec          (fly launch defaults to the personal org)
Name:         <unspecified>          (must be specified in UI)
Region:       Toronto, Canada        (this is the fastest region for you)
App Machines: shared-cpu-1x, 1GB RAM (most apps need about 1GB of RAM)
Postgres:     <none>                 (not requested)
Redis:        <none>                 (not requested)
Tigris:       <none>                 (not requested)


The following problems must be fixed in the Launch UI:
 * app name john is already taken
   each Fly.io app must have a unique name

? Would you like to continue in the web UI? Yes
Opening https://fly.io/cli/launch/3371737965796c646f716c3671376d673365326568356e61686a6a6d71677177 ...

Waiting for launch data... Done
Created app 'jonapp1' in organization 'personal'
Admin URL: https://fly.io/apps/jonapp1
Hostname: jonapp1.fly.dev
Wrote config file fly.toml
PS C:\Users\john>

4 Notepad fly.toml

Use notepad to edit fly.toml file, which was generated by “flyctl launch” command.

PS C:\Users\john> notepad fly.toml

By default, you will get following default configuration in fly.toml file for your jonapp1 application:

# fly.toml app configuration file generated for jonapp1 on 2024-06-16T18:25:48-04:00
#
# See https://fly.io/docs/reference/configuration/ for information about how to use this file.
#
app = ‘jonapp1’
primary_region = ‘yyz’
[http_service]
internal_port = 8080
force_https = true
auto_stop_machines = true
auto_start_machines = true
min_machines_running = 0
processes = [‘app’]
[[vm]]
memory = ‘1gb’
cpu_kind = ‘shared’
cpus = 1

Modify it to :

PS C:\Users\john> type fly.toml
# fly.toml app configuration file generated for jonapp1 on 2024-06-16T18:25:48-04:00
#
# See https://fly.io/docs/reference/configuration/ for information about how to use this file.
#
app = ‘jonapp1’
primary_region = ‘yyz’
[build]
image = “excalidraw/excalidraw:latest”
[[services]]
http_checks = []
internal_port = 80
processes = [“app”]
protocol = “tcp”
script_checks = []
[services.concurrency]
hard_limit = 25
soft_limit = 20
type = “connections”
[[services.ports]]
force_https = true
handlers = [“http”]
port = 80
[[services.ports]]
handlers = [“tls”, “http”]
port = 443
[[services.tcp_checks]]
grace_period = “1s”
interval = “15s”
restart_limit = 0
timeout = “2s”
PS C:\Users\john>

5 (optional)Create a new 1GB volume disk for persistent data.

fly volumes create app1_data --size 1

6 fly deploy

PS C:\Users\john> fly deploy
==> Verifying app config
Validating C:\Users\john\fly.toml
✓ Configuration is valid
–> Verified app config
==> Building image
Searching for image ‘excalidraw/excalidraw:latest’ remotely…
image found: img_98dgp8o8lnm6vxw0
Watch your deployment at https://fly.io/apps/jonapp1/monitoring
Provisioning ips for jonapp1
Dedicated ipv6: 2a09:8280:1::39:7c9d:0
Shared ipv4: 66.241.125.148
Add a dedicated ipv4 with: fly ips allocate-v4
This deployment will:
* create 2 “app” machines
No machines in group app, launching a new machine
Creating a second machine to increase service availability
Finished launching new machines
——-
✔ Machine 7811eedf951dd8 [app] update finished: success
——-
Checking DNS configuration for jonapp1.fly.dev
Visit your newly deployed app at https://jonapp1.fly.dev/
PS C:\Users\john>

“fly deploy creates two Machines per process, for resilience purposes.”

You can use --ha=false flag with fly launch or fly deploy. That will disable the default of shipping two machines on first deploy.

fly machine kill and destroy command to kill and destroy one machine:

PS C:\Users\john> fly machine kill
? Select a machine: 48ed676b7e9058 little-bird-1010 (started, region yyz, process group 'app')
machine 48ed676b7e9058 was found and is currently in a started state, attempting to kill...
kill signal has been sent
PS C:\Users\john>fly machine destroy
? Select a machine: 48ed676b7e9058 little-bird-1010 (stopped, region yyz, process group 'app')
machine 48ed676b7e9058 was found and is currently in stopped state, attempting to destroy...
48ed676b7e9058 has been destroyed

Use own domain for fly.io apps:

https://fly.io/docs/networking/custom-domains-with-fly/#teaching-your-app-about-custom-domains

To get that, use the fly ips list command. You’ll need to configure the A record with your DNS provider.

You need to add in an “A Record” for your domain that points to the IP address. Once this is done and propagated through the DNS system, you should be able to connect over unencrypted HTTP to using the domain name.

PS C:\Users\john> fly ips list
VERSION IP              TYPE            REGION  CREATED AT
v4      66.241.125.148  public (shared)         Jan 1 0001 00:00

Learn more about Fly.io public, private, shared and dedicated IP addresses in our docs: https://fly.io/docs/reference/services/#ip-addresses
PS C:\Users\john>

Demo: https://linx.51sec.org/ or https://mindmap.51sec.org

Render Deployment

https://render.com/pricing#compute

1 Log in to Render.com

2 Create a new Web Service

excalidraw/excalidraw:latest

3 Choose Free instance for hobby projects

Free instances spin down after periods of inactivity. They do not support SSH access, scaling, one-off jobs, or persistent disks. Select any paid instance type to enable these features.

Advanced Settings for your hobby project:

4 Add your payment information with a valid credit card

5 You will get an aut0-generated url for your hobby project

6 Check the URL to see your app

7 Custome domain configuration

azure-cloud.excalidraw

Animation:

Sample file “azure-cloud.excalidraw” : https://od.51sec.org/TGM_51Sec_EU/Sharing/diagram/

Fly.io commands

fly orgs list

fly apps list

fly volumes list -a memos

PS C:\Users\john> fly orgs show 51sec
Organization
Name : 51sec
Slug : 51sec
Type : SHARED
Summary
You have admin permissions on this organizaton
There are 1 members associated with this organization
Organization Members
+——+———————-+——-+
| NAME | EMAIL | ROLE |
+——+———————-+——-+
| | [email protected] | ADMIN |
+——+———————-+——-+
PS C:\Users\john>fly volumes destroy vol_53q80vdpk66vgzy6
Warning! Every volume is pinned to a specific physical host. You should create two or more volumes per application. Deleting this volume will leave you with 1 volume(s) for this application,? Are you sure you want to destroy this volume? Yes
Destroyed volume ID: vol_53q80vdpk66vgzy6 name: freshrss51sec_data
PS C:\Users\john>PS C:\Users\john> fly config save -a mindmap51sec
Wrote config file fly.toml
PS C:\Users\john> fly volumes list
ID STATE NAME SIZE REGION ZONE ENCRYPTED ATTACHED VM CREATED AT
vol_53q80vdpk66vgzy6 created freshrss51sec_data 1GB yyz 5e29 true 1 year ago
vol_1q85vg3lem8rzdxe created freshrss51sec_data 1GB yyz aeee true e28606eb740486 10 months ago
PS C:\Users\john>

Self Hosted Docker Installation Pre-requirements

Free resources you might need to complete this docker project:

Pre-installed services:

Docker,

apt update
apt install docker.io
apt install docker-compose
apt upgrade docker.io
mkdir /root/data/docker_data/<docker_name>

Docker-Compose (Using Ubuntu OS for the commands)

Docker-compose down
Optional command : use following command to backup your Docker data. You might need to change your folder name based on your docker configuraiton

cp -r /root/data/docker_data/<docker_name> /root/data/docker_data_backup/<docker_name>

docker-compose pull
docker-compose up -d
docker image prune

Portainer (Optional)

docker volume create portainer_data
docker run -d -p 9000:9000 –name portainer –restart always -v /var/run/docker.sock:/var/run/docker.sock -v portainer_data:/data portainer/portainer-ce:latest

Install some applications: apt install wget curl sudo vim git (Optional)
aapanel with Nginx (Optional)
Nginx Proxy Manager (Optional)
Install screen (Optional)

Install screen (Depends on the Linux Distribution if it came pre installed or not) : yum install screen
Initiate a Screen : screen or screen -S <screen name> <command to execute>
Detach from the screen : “CTRL+A,D” not “CTRL+A+D”
List all the screen currently working : screen -ls
Reattach to a screen : screen -r <session number> or screen -r <screen name>
Kill specific screen: screen -X -S <screen name> quit
Kill all screens : pkill screen

Monitoring Usage

Remove Docker and Related folders

docker stop <Docker Name> # stop the docker but not remove anything.
docker rm -f <Docker Name> # remove speficic container, but will not delete mapped volumes
rm -rf /root/data/docker_data/<Docker Mapped Volumns> # remove all mapped volumes

Restrick Log File Size:

journalctl –vacuum-size=100M
Limit it to 25M:

nano /etc/systemd/journald.conf
SystemMaxUse=25M
systemctl restart systemd-journald.service

Enable IPv6 and Limit Log File Size (Ubuntu)

Add customized self defined IPv6 address segment to enable container’s IPv6 fucntion. And limit log file’s size and numbers in case log file to fill all hard drive’s space.

cat > /etc/docker/daemon.json << EOF
{
    "log-driver": "json-file",
    "log-opts": {
        "max-size": "20m",
        "max-file": "3"
    },
    "ipv6": true,
    "fixed-cidr-v6": "fd00:dead:beef:c0::/80",
    "eixperimental":true,
    "ip6tables":true
}
EOF

Restart Docker service: