Merge pull request #1 from mingrammer/master

pr1

.gitignore

@@ -22,4 +22,10 @@ node_modules
 main.py
 
 # trash
-.DS_Store
+.DS_Store
+
+# Website uses yarn; ignore npm package-lock.json
+website/package-lock.json
+
+# Ignore .swp files
+.swp

CONTRIBUTING.md

@@ -1,6 +1,6 @@
 # Contribution Guide
 
-You shouldn't edit the node class files (all files under `diagram` directory) by
+You shouldn't edit the node class files (all files under `diagrams/` directory) by
 yourself.
 
 ## Resources
@@ -27,7 +27,7 @@ ffmpeg -i my_big_image.jpg -vf scale=w=256:h=256:force_original_aspect_ratio=dec
 Then just run the `./autogen.sh` to generate the added or updated node classes.
 
 > IMPORTANT NOTE: To run `autogen.sh`, you need [round][round] and
-> [inkscape][inkscape] command lines that are used for clearning the image
+> [inkscape][inkscape] command lines that are used for cleaning the image
 > resource filenames.
 >
 > macOS users can download the inkscape via Homebrew.
@@ -55,3 +55,17 @@ Then just run the `./autogen.sh` to generate the added or updated aliases.
 ```shell
 python -m unittest tests/*.py -v
 ```
+
+## Testing changes to the website
+
+The [Docusaurus](https://docusaurus.io/)-based documentation website can be run by installing dependencies, then simply running `npm run start`.
+
+```bash
+cd website/
+npm i
+npm run start
+```
+
+The website will be available on [http://localhost:3000](http://localhost:3000).
+
+Edit files in `website/` and `docs/` respectively to edit documentation.

README.md

@@ -13,6 +13,7 @@
 ![kubernetes provider](https://img.shields.io/badge/provider-Kubernetes-orange?logo=kubernetes&color=326ce5)
 ![alibaba cloud provider](https://img.shields.io/badge/provider-AlibabaCloud-orange)
 ![oracle cloud provider](https://img.shields.io/badge/provider-OracleCloud-orange?logo=oracle&color=f80000)
+![programming provider](https://img.shields.io/badge/provider-Programming-orange?color=5f87bf)
 
 **Diagram as Code**.
 

autogen.sh

@@ -1,8 +1,10 @@
 #!/bin/bash
+set -e
+
 app_root_dir="diagrams"
 
 # NOTE: azure icon set is not latest version
-providers=("onprem" "aws" "azure" "gcp" "k8s" "alibabacloud" "oci")
+providers=("onprem" "aws" "azure" "gcp" "k8s" "alibabacloud" "oci" "programming")
 
 if ! [ -x "$(command -v round)" ]; then
   echo 'round is not installed'

config.py

@@ -11,7 +11,7 @@ DIR_APP_ROOT = "diagrams"
 DIR_RESOURCE = "resources"
 DIR_TEMPLATE = "templates"
 
-PROVIDERS = ("base", "onprem", "aws", "azure", "gcp", "k8s", "alibabacloud", "oci")
+PROVIDERS = ("base", "onprem", "aws", "azure", "gcp", "k8s", "alibabacloud", "oci", "programming")
 
 #########################
 #  Resource Processing  #
@@ -32,6 +32,7 @@ FILE_PREFIXES = {
     "k8s": (),
     "alibabacloud": (),
     "oci": ("OCI-",),
+    "programming": (),
 }
 
 #########################
@@ -330,5 +331,13 @@ ALIASES = {
             "Databaseservice": "DBService",
             "DatabaseserviceGrey": "DBServiceGrey",
         }
-    }
+    },
+    "programming": {
+        "language": {
+            "Javascript": "JavaScript",
+            "Nodejs": "NodeJS",
+            "Php": "PHP",
+            "Typescript": "TypeScript"
+        },
+    },
 }

diagrams/aws/media.py

@@ -0,0 +1,55 @@
+# This module is automatically generated by autogen.sh. DO NOT EDIT.
+
+from . import _AWS
+
+
+class _Media(_AWS):
+    _type = "media"
+    _icon_dir = "resources/aws/media"
+
+
+class ElasticTranscoder(_Media):
+    _icon = "elastic-transcoder.png"
+
+
+class ElementalConductor(_Media):
+    _icon = "elemental-conductor.png"
+
+
+class ElementalDelta(_Media):
+    _icon = "elemental-delta.png"
+
+
+class ElementalLive(_Media):
+    _icon = "elemental-live.png"
+
+
+class ElementalMediaconnect(_Media):
+    _icon = "elemental-mediaconnect.png"
+
+
+class ElementalMediaconvert(_Media):
+    _icon = "elemental-mediaconvert.png"
+
+
+class ElementalMedialive(_Media):
+    _icon = "elemental-medialive.png"
+
+
+class ElementalMediapackage(_Media):
+    _icon = "elemental-mediapackage.png"
+
+
+class ElementalMediastore(_Media):
+    _icon = "elemental-mediastore.png"
+
+
+class ElementalMediatailor(_Media):
+    _icon = "elemental-mediatailor.png"
+
+
+class ElementalServer(_Media):
+    _icon = "elemental-server.png"
+
+
+# Aliases

diagrams/aws/network.py

@@ -48,6 +48,10 @@ class InternetGateway(_Network):
     _icon = "internet-gateway.png"
 
 
+class Nacl(_Network):
+    _icon = "nacl.png"
+
+
 class NATGateway(_Network):
     _icon = "nat-gateway.png"
 
@@ -56,14 +60,26 @@ class NetworkingAndContentDelivery(_Network):
     _icon = "networking-and-content-delivery.png"
 
 
+class PrivateSubnet(_Network):
+    _icon = "private-subnet.png"
+
+
 class Privatelink(_Network):
     _icon = "privatelink.png"
 
 
+class PublicSubnet(_Network):
+    _icon = "public-subnet.png"
+
+
 class Route53(_Network):
     _icon = "route-53.png"
 
 
+class RouteTable(_Network):
+    _icon = "route-table.png"
+
+
 class SiteToSiteVpn(_Network):
     _icon = "site-to-site-vpn.png"
 
@@ -72,6 +88,10 @@ class TransitGateway(_Network):
     _icon = "transit-gateway.png"
 
 
+class VPCPeering(_Network):
+    _icon = "vpc-peering.png"
+
+
 class VPCRouter(_Network):
     _icon = "vpc-router.png"
 

diagrams/onprem/analytics.py

@@ -24,6 +24,10 @@ class Hive(_Analytics):
     _icon = "hive.png"
 
 
+class Metabase(_Analytics):
+    _icon = "metabase.png"
+
+
 class Norikra(_Analytics):
     _icon = "norikra.png"
 
@@ -36,4 +40,8 @@ class Storm(_Analytics):
     _icon = "storm.png"
 
 
+class Tableau(_Analytics):
+    _icon = "tableau.png"
+
+
 # Aliases

diagrams/onprem/logging.py

@@ -16,6 +16,10 @@ class Logstash(_Logging):
     _icon = "logstash.png"
 
 
+class Loki(_Logging):
+    _icon = "loki.png"
+
+
 # Aliases
 
 LogStash = Logstash

diagrams/programming/__init__.py

@@ -0,0 +1,12 @@
+"""
+Programming provides a set of programming languages and frameworks.
+"""
+
+from diagrams import Node
+
+
+class _Programming(Node):
+    _provider = "programming"
+    _icon_dir = "resources/programming"
+
+    fontcolor = "#ffffff"

diagrams/programming/framework.py

@@ -0,0 +1,55 @@
+# This module is automatically generated by autogen.sh. DO NOT EDIT.
+
+from . import _Programming
+
+
+class _Framework(_Programming):
+    _type = "framework"
+    _icon_dir = "resources/programming/framework"
+
+
+class Angular(_Framework):
+    _icon = "angular.png"
+
+
+class Backbone(_Framework):
+    _icon = "backbone.png"
+
+
+class Django(_Framework):
+    _icon = "django.png"
+
+
+class Ember(_Framework):
+    _icon = "ember.png"
+
+
+class Flask(_Framework):
+    _icon = "flask.png"
+
+
+class Flutter(_Framework):
+    _icon = "flutter.png"
+
+
+class Laravel(_Framework):
+    _icon = "laravel.png"
+
+
+class Rails(_Framework):
+    _icon = "rails.png"
+
+
+class React(_Framework):
+    _icon = "react.png"
+
+
+class Spring(_Framework):
+    _icon = "spring.png"
+
+
+class Vue(_Framework):
+    _icon = "vue.png"
+
+
+# Aliases

diagrams/programming/language.py

@@ -0,0 +1,84 @@
+# This module is automatically generated by autogen.sh. DO NOT EDIT.
+
+from . import _Programming
+
+
+class _Language(_Programming):
+    _type = "language"
+    _icon_dir = "resources/programming/language"
+
+
+class Bash(_Language):
+    _icon = "bash.png"
+
+
+class C(_Language):
+    _icon = "c.png"
+
+
+class Cpp(_Language):
+    _icon = "cpp.png"
+
+
+class Csharp(_Language):
+    _icon = "csharp.png"
+
+
+class Dart(_Language):
+    _icon = "dart.png"
+
+
+class Go(_Language):
+    _icon = "go.png"
+
+
+class Java(_Language):
+    _icon = "java.png"
+
+
+class Javascript(_Language):
+    _icon = "javascript.png"
+
+
+class Kotlin(_Language):
+    _icon = "kotlin.png"
+
+
+class Matlab(_Language):
+    _icon = "matlab.png"
+
+
+class Nodejs(_Language):
+    _icon = "nodejs.png"
+
+
+class Php(_Language):
+    _icon = "php.png"
+
+
+class Python(_Language):
+    _icon = "python.png"
+
+
+class R(_Language):
+    _icon = "r.png"
+
+
+class Ruby(_Language):
+    _icon = "ruby.png"
+
+
+class Swift(_Language):
+    _icon = "swift.png"
+
+
+class Typescript(_Language):
+    _icon = "typescript.png"
+
+
+# Aliases
+
+JavaScript = Javascript
+NodeJS = Nodejs
+PHP = Php
+TypeScript = Typescript

docs/nodes/aws.md

@@ -65,12 +65,17 @@ Node classes list of aws provider.
 - **diagrams.aws.network.Endpoint**
 - **diagrams.aws.network.GlobalAccelerator**, **GAX** (alias)
 - **diagrams.aws.network.InternetGateway**
+- **diagrams.aws.network.Nacl**
 - **diagrams.aws.network.NATGateway**
 - **diagrams.aws.network.NetworkingAndContentDelivery**
+- **diagrams.aws.network.PrivateSubnet**
 - **diagrams.aws.network.Privatelink**
+- **diagrams.aws.network.PublicSubnet**
 - **diagrams.aws.network.Route53**
+- **diagrams.aws.network.RouteTable**
 - **diagrams.aws.network.SiteToSiteVpn**
 - **diagrams.aws.network.TransitGateway**
+- **diagrams.aws.network.VPCPeering**
 - **diagrams.aws.network.VPCRouter**
 - **diagrams.aws.network.VPC**
 
@@ -234,3 +239,17 @@ Node classes list of aws provider.
 - **diagrams.aws.analytics.RedshiftDenseComputeNode**
 - **diagrams.aws.analytics.RedshiftDenseStorageNode**
 - **diagrams.aws.analytics.Redshift**
+
+## aws.media
+
+- **diagrams.aws.media.ElasticTranscoder**
+- **diagrams.aws.media.ElementalConductor**
+- **diagrams.aws.media.ElementalDelta**
+- **diagrams.aws.media.ElementalLive**
+- **diagrams.aws.media.ElementalMediaconnect**
+- **diagrams.aws.media.ElementalMediaconvert**
+- **diagrams.aws.media.ElementalMedialive**
+- **diagrams.aws.media.ElementalMediapackage**
+- **diagrams.aws.media.ElementalMediastore**
+- **diagrams.aws.media.ElementalMediatailor**
+- **diagrams.aws.media.ElementalServer**

docs/nodes/onprem.md

@@ -140,6 +140,7 @@ Node classes list of onprem provider.
 
 - **diagrams.onprem.logging.Fluentd**
 - **diagrams.onprem.logging.Logstash**, **LogStash** (alias)
+- **diagrams.onprem.logging.Loki**
 
 ## onprem.analytics
 
@@ -147,6 +148,8 @@ Node classes list of onprem provider.
 - **diagrams.onprem.analytics.Flink**
 - **diagrams.onprem.analytics.Hadoop**
 - **diagrams.onprem.analytics.Hive**
+- **diagrams.onprem.analytics.Metabase**
 - **diagrams.onprem.analytics.Norikra**
 - **diagrams.onprem.analytics.Spark**
 - **diagrams.onprem.analytics.Storm**
+- **diagrams.onprem.analytics.Tableau**

docs/nodes/programming.md

@@ -0,0 +1,40 @@
+---
+id: programming
+title: Programming
+---
+
+Node classes list of programming provider.
+
+## programming.framework
+
+- **diagrams.programming.framework.Angular**
+- **diagrams.programming.framework.Backbone**
+- **diagrams.programming.framework.Django**
+- **diagrams.programming.framework.Ember**
+- **diagrams.programming.framework.Flask**
+- **diagrams.programming.framework.Flutter**
+- **diagrams.programming.framework.Laravel**
+- **diagrams.programming.framework.Rails**
+- **diagrams.programming.framework.React**
+- **diagrams.programming.framework.Spring**
+- **diagrams.programming.framework.Vue**
+
+## programming.language
+
+- **diagrams.programming.language.Bash**
+- **diagrams.programming.language.C**
+- **diagrams.programming.language.Cpp**
+- **diagrams.programming.language.Csharp**
+- **diagrams.programming.language.Dart**
+- **diagrams.programming.language.Go**
+- **diagrams.programming.language.Java**
+- **diagrams.programming.language.Javascript**, **JavaScript** (alias)
+- **diagrams.programming.language.Kotlin**
+- **diagrams.programming.language.Matlab**
+- **diagrams.programming.language.Nodejs**, **NodeJS** (alias)
+- **diagrams.programming.language.Php**, **PHP** (alias)
+- **diagrams.programming.language.Python**
+- **diagrams.programming.language.R**
+- **diagrams.programming.language.Ruby**
+- **diagrams.programming.language.Swift**
+- **diagrams.programming.language.Typescript**, **TypeScript** (alias)

pyproject.toml

@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "diagrams"
-version = "0.10.0"
+version = "0.11.0"
 description = "Diagram as Code"
 license = "MIT"
 authors = ["mingrammer <mingrammer@gmail.com>"]

scripts/generate.py

@@ -7,7 +7,7 @@ from jinja2 import Environment, FileSystemLoader, Template
 import config as cfg
 from . import app_root_dir, doc_root_dir, resource_dir, template_dir
 
-_usage = "Usage: generate.py <onprem|aws|gcp|azure|k8s|alibabacloud|oci>"
+_usage = "Usage: generate.py <onprem|aws|gcp|azure|k8s|alibabacloud|oci|programming>"
 
 
 def load_tmpl(tmpl: str) -> Template:

scripts/resource.py

@@ -80,6 +80,10 @@ def cleaner_oci(f):
     return f.lower()
 
 
+def cleaner_programming(f):
+    return f.lower()
+
+
 cleaners = {
     "onprem": cleaner_onprem,
     "aws": cleaner_aws,
@@ -88,6 +92,7 @@ cleaners = {
     "k8s": cleaner_k8s,
     "alibabacloud": cleaner_alibabacloud,
     "oci": cleaner_oci,
+    "programming": cleaner_programming,
 }
 
 

website/core/Footer.js

@@ -49,17 +49,7 @@ class Footer extends React.Component {
           </div>
           <div>
             <h5>More</h5>
-            <a href="https://github.com/mingrammer/diagrams">GitHub</a>
-            <a
-              className="github-button"
-              href={this.props.config.repoUrl}
-              data-icon="octicon-star"
-              data-count-href="/mingrammer/diagrams/stargazers"
-              data-show-count="true"
-              data-count-aria-label="# stargazers on GitHub"
-              aria-label="Star this project on GitHub">
-              Star
-            </a>
+            <iframe src="https://ghbtns.com/github-btn.html?user=mingrammer&repo=diagrams&type=star&count=true&size=large" frameBorder="0" scrolling="0" width="170" height="30" title="Star mingrammer/diagrams on GitHub"></iframe>
           </div>
         </section>
         <section className="copyright">{this.props.config.copyright}</section>

website/i18n/en.json

@@ -43,6 +43,9 @@
       },
       "nodes/onprem": {
         "title": "OnPrem"
+      },
+      "nodes/programming": {
+        "title": "Programming"
       }
     },
     "links": {

website/pages/en/index.js

@@ -106,7 +106,7 @@ class Index extends React.Component {
             `Diagram as Code` allows you to **track** the architecture diagram changes in any **version control** system.
         </MarkdownBlock>
         <MarkdownBlock>
-            Diagrams currently supports six major providers: `AWS`, `Azure`, `GCP`, `Kubernetes`, `Alibaba Cloud` and `Oracle Cloud`. It now also supports `On-Premise` nodes.
+            Diagrams currently supports six major providers: `AWS`, `Azure`, `GCP`, `Kubernetes`, `Alibaba Cloud` and `Oracle Cloud`. It now also supports `On-Premise` nodes as well as `Programming Languages` and `Frameworks`.
         </MarkdownBlock>
       </div>
     );

website/sidebars.json

@@ -17,7 +17,8 @@
       "nodes/gcp",
       "nodes/k8s",
       "nodes/alibabacloud",
-      "nodes/oci"
+      "nodes/oci",
+      "nodes/programming"
     ]
   }
 }