msb-public
/
diagrams
mirror of https://github.com/mingrammer/diagrams
1
0
Code Issues Projects Releases Wiki Activity

[Web] Continue + add css

Browse Source
pull/201/head
tessier 5 years ago
parent 64a1250cad
commit 2133222d67
7 changed files with 177 additions and 38 deletions
Show Stats Download Patch File Download Diff File

53
docker/web/app.py
Unescape View File

@ -3,51 +3,46 @@ from flask import Flask, render_template
app = Flask(__name__) app = Flask(__name__)
@app.route('/') @app.route('/', methods=['POST', 'GET'])
def welcome():
"""Top welcome page."""
template = 'welcome.html'
values = {
"aa": "bjc"
}
return render_template(template, **values)
@app.route('/builder', methods=['POST', 'GET'])
def builder(): def builder():
"""Builder page with python input.""" """One page app."""
import os import os
import subprocess import subprocess
from flask import request from flask import request
template = 'builder.html' template = 'app.html'
values = {} values = {}
diag_folder = "static/diagrams/" diag_folder = "static/diagrams/"
code = request.form.get('code') diagrams_data = request.form.get('diagrams_data')
if code: if diagrams_data:
# clean the directory # clean the directory
_, _, filenames = next(os.walk(diag_folder)) _, _, filenames = next(os.walk(diag_folder))
for one_file in filenames: for one_file in filenames:
os.remove('%s%s' % (diag_folder, one_file)) os.remove('%s%s' % (diag_folder, one_file))
# write the code in a file and execute # write the diagrams_data in a file and execute
with open("%stemp_code.py" % diag_folder, "w") as f: with open("%stemp_code.py" % diag_folder, "w") as f:
f.write(code) f.write(diagrams_data)
result = subprocess.run(["python3", "temp_code.py"], cwd=diag_folder, capture_output=True) result = subprocess.run(["python3", "temp_code.py"], cwd=diag_folder, capture_output=True)
# TODO get the result if there's error to display on the template
print('stdout: ', result.stdout)
print('stderr: ', result.stderr)
# delete the temp file # delete the temp file
os.remove("%stemp_code.py" % diag_folder) os.remove("%stemp_code.py" % diag_folder)
# get the pic to display # if there's error display them on the template
_, _, filenames = next(os.walk(diag_folder)) if result.stderr:
pic_name = filenames[0] error_msg = result.stderr.decode("utf-8")
values.update({ # clean up the error message
"code": code, error_msg = error_msg.replace('File "temp_code.py", ', '')
"pic_name": pic_name, values.update({
}) "diagrams_data": diagrams_data,
"error": error_msg
})
else:
# get the pic to display
_, _, filenames = next(os.walk(diag_folder))
pic_name = filenames[0]
values.update({
"diagrams_data": diagrams_data,
"pic_name": pic_name,
})
return render_template(template, **values) return render_template(template, **values)

6
docker/web/static/diagrams.css
Unescape View File

@ -0,0 +1,6 @@
img {
margin-bottom: 0px;
}
.icon {
width: 100px;
}

30
docker/web/static/diagrams.js
Unescape View File

@ -0,0 +1,30 @@
jQuery(document).ready(function () {
var example_1_btn = jQuery('#example_1_btn');
var example_2_btn = jQuery('#example_2_btn');
var example_3_btn = jQuery('#example_3_btn');
var more_example_btn = jQuery('#more_example_btn');
var diagrams_form = jQuery('#diagrams_form');
var diagrams_data_textarea = jQuery('#diagrams_data');
function InsertDiagramsText(text) {
diagrams_data_textarea.val(text);
diagrams_form.submit();
}
example_1_btn.click(function(){
InsertDiagramsText(jQuery("#example_1_text").html().trim());
});
example_2_btn.click(function(){
InsertDiagramsText(jQuery("#example_2_text").html().trim());
});
example_3_btn.click(function(){
InsertDiagramsText(jQuery("#example_3_text").html().trim());
});
more_example_btn.click(function(){
window.open("https://diagrams.mingrammer.com/docs/getting-started/examples", "_blank");
});
});

BIN
docker/web/static/diagrams/grouped_workersぽぽ.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 54 KiB

117
docker/web/templates/app.html
Unescape View File

@ -0,0 +1,117 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Diagrams On Web</title>
<meta name="description" content="Build Diagram from code in your browser." />
<meta name="keywords" content="Diagrams web" />
<link rel="stylesheet" href="https://unpkg.com/sakura.css/css/sakura.css" type="text/css">
<link rel="stylesheet" type="text/css" href="static/diagrams.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body id="{% block body_id %}normal_body{% endblock %}">
<a href="https://diagrams.mingrammer.com/"><img src="static/diagrams.png" alt="Diagrams" class="icon" /></a>
<input type="button" value="Example 1" id="example_1_btn" />
<input type="button" value="Example 2" id="example_2_btn" />
<input type="button" value="Example 3" id="example_3_btn" />
<input type="button" value="More example" id="more_example_btn" />
<form action="" method="POST" id="diagrams_form">
<textarea name="diagrams_data" rows="8" cols="80" id="diagrams_data">{{diagrams_data}}</textarea>
<input type="submit" value="Build">
</form>
{% if error %}
<h4>ERROR</h4>
<pre><code>{{error}}</code></pre>
{% else %}
<img src="/static/diagrams/{{pic_name}}" alt="">
{% endif %}
<script id="example_1_text" type="bogus">
from diagrams import Diagram
from diagrams.aws.compute import EC2
from diagrams.aws.database import RDS
from diagrams.aws.network import ELB
with Diagram("Grouped Workers", show=False, direction="TB"):
ELB("lb") >> [EC2("worker1"),
EC2("worker2"),
EC2("worker3"),
EC2("worker4"),
EC2("worker5")] >> RDS("events")
</script>
<script id="example_2_text" type="bogus">
from diagrams import Cluster, Diagram
from diagrams.gcp.analytics import BigQuery, Dataflow, PubSub
from diagrams.gcp.compute import AppEngine, Functions
from diagrams.gcp.database import BigTable
from diagrams.gcp.iot import IotCore
from diagrams.gcp.storage import GCS
with Diagram("Message Collecting", show=False):
pubsub = PubSub("pubsub")
with Cluster("Source of Data"):
[IotCore("core1"),
IotCore("core2"),
IotCore("core3")] >> pubsub
with Cluster("Targets"):
with Cluster("Data Flow"):
flow = Dataflow("data flow")
with Cluster("Data Lake"):
flow >> [BigQuery("bq"),
GCS("storage")]
with Cluster("Event Driven"):
with Cluster("Processing"):
flow >> AppEngine("engine") >> BigTable("bigtable")
with Cluster("Serverless"):
flow >> Functions("func") >> AppEngine("appengine")
pubsub >> flow
</script>
<script id="example_3_text" type="bogus">
from diagrams import Cluster, Diagram
from diagrams.onprem.analytics import Spark
from diagrams.onprem.compute import Server
from diagrams.onprem.database import PostgreSQL
from diagrams.onprem.inmemory import Redis
from diagrams.onprem.logging import Fluentd
from diagrams.onprem.monitoring import Grafana, Prometheus
from diagrams.onprem.network import Nginx
from diagrams.onprem.queue import Kafka
with Diagram("Advanced Web Service with On-Premise", show=False):
ingress = Nginx("ingress")
metrics = Prometheus("metric")
metrics << Grafana("monitoring")
with Cluster("Service Cluster"):
grpcsvc = [
Server("grpc1"),
Server("grpc2"),
Server("grpc3")]
with Cluster("Sessions HA"):
master = Redis("session")
master - Redis("replica") << metrics
grpcsvc >> master
with Cluster("Database HA"):
master = PostgreSQL("users")
master - PostgreSQL("slave") << metrics
grpcsvc >> master
aggregator = Fluentd("logging")
aggregator >> Kafka("stream") >> Spark("analytics")
ingress >> grpcsvc >> aggregator
</script>
<p style="text-align:center">Made with ♥ and <a href="https://oxal.org/projects/sakura/" target="_blank"><g-emoji class="g-emoji" alias="cherry_blossom" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f338.png"><img class="emoji" alt="cherry_blossom" src="https://github.githubassets.com/images/icons/emoji/unicode/1f338.png" width="20" height="20"></g-emoji> Sakura CSS</a></p>
</body>
<script type="text/javascript" src="static/diagrams.js"></script>
</html>

6
docker/web/templates/builder.html
Unescape View File

@ -1,6 +0,0 @@
<form action="" method="POST">
<textarea name="code" rows="8" cols="80">{{code}}</textarea>
<input type="submit" value="Build">
</form>
<img src="/static/diagrams/{{pic_name}}" alt="">

3
docker/web/templates/welcome.html
Unescape View File

@ -1,3 +0,0 @@
<img src="static/diagrams.png" alt="Diagrams">
You can use the builder <a href="/builder">Here</a>
Write Preview
Loading…
Cancel
Save