Here, all the tools used to build MkJava.com web site:

  • MkDocs: a static site generator using Markdown syntax.
  • Visual Studio Code: source code editor with embedded Git, syntax highlighting, intelligent code completion, snippets, and code refactoring.

Generic

  • Balsamiq Mockups: a graphical user interface mockup and website wireframe builder application. It is not free.
  • draw.io: a web/desktop tool like Visio. Free!!

UML

js-sequence-diagrams

A tool to "turn text into UML sequence diagrams". The tool supports two styles: "handwritten" and normal.

Example:

1
2
3
4
5
Title: Here is a title
A->B: Normal line
B-->C: Dashed line
C->>D: Open arrow
D-->>A: Dashed open arrow

Picture built using code above

flowchart.js

a tool to draw simple SVG flow chart diagrams from textual representation of the diagram

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
st=>start: Start|past:>http://www.google.com[blank]
e=>end: End|future:>http://www.google.com
op1=>operation: My Operation|past
op2=>operation: Stuff|current
sub1=>subroutine: My Subroutine|invalid
cond=>condition: Yes
or No?|approved:>http://www.google.com
c2=>condition: Good idea|rejected
io=>inputoutput: catch something...|future

st->op1(right)->cond
cond(yes, right)->c2
cond(no)->sub1(left)->op1
c2(yes)->io->e
c2(no)->op2->e

Picture built using code above

Architecture

Diagrams

A drawing cloud system architecture in Python code; supports for AWS, Azure, GCP, Kubernetes, Alibaba and Oracle cloud:

Example:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
from diagrams import Cluster, Diagram
from diagrams.aws.compute import ECS
from diagrams.aws.database import RDS
from diagrams.aws.network import Route53

with Diagram("Simple Web Service with DB Cluster", show=False):
    dns = Route53("dns")
    web = ECS("service")

    with Cluster("DB Cluster"):
        db_master = RDS("master")
        db_master - [RDS("slave1"),
                     RDS("slave2")]

    dns >> web >> db_master

Picture built using code above

Other Tools

  • Railroad Diagram Generator: a tool for creating syntax diagrams, also known as railroad diagrams, from context-free grammars specified in EBNF.
  • Mermaid Live Editor: a simple markdown-like script language for generating charts from text via javascript. simple and intuitive language
  • RegExr: a web sandbox for regular expression