-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
85 lines (79 loc) · 2.22 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!DOCTYPE html>
<html lang="en">
<head>
<title>DB DiaYAML</title>
<style type="text/css" media="screen">
#editor {
position: absolute;
top: 0;
right: 50%;
width: 50%;
bottom: 0;
left: 0;
}
#diagram {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 50%;
width: 50%;
background-color: #DDD;
overflow: scroll;
}
#diagram div.error {
display: block;
margin: auto;
background-color: red;
color: white;
font-family: sans-serif;
padding: 1em;
margin: 10em 2em;
}
#diagram svg {
display: block;
margin: auto;
}
</style>
</head>
<body>
<div id="editor"># DB DiaYAML - A simple way to plan database schemas
#
# Draw database diagrams using GraphViz / DOT from a very simple YAML file.
#
# See sample file below!
person: # A Table
name: # A Field
address:
line1:
line2:
person: # Link adds a foreign key (missing field implies `id`, will be added if not already existing!)
link: person
order:
address: address # Shorter version of a foreign key
pizzas!:
beers!:
more beers!:
a:
letter:
links: # You can use links to get multiple links instead of just one
- target: person.name # A foreign key to a specific field
diaprops: # Any GraphViz/Dot property allowed in here however no escaping is done within diaprops, so be careful!
color: red
style: dashed
label: <&nbsp;this is<font color="blue"><b> very </b>different</font>> # Special HTML string (plain text possible)
arrowhead: open
arrowtail: vee
- business
business:
id:
has_address: address.id
# Developed by [Forbesmyester](http://keyboardwritescode.blogspot.co.uk/).
# Blogged about [at Blogger](http://keyboardwritescode.blogspot.co.uk/2015/07/weekend-project-db-diayaml.html).
# Hosted at [GitHub](https://github.com/forbesmyester/db-diayaml).</div>
<div id="diagram"></div>
<script src="//cdn.jsdelivr.net/ace/1.2.0/min/ace.js" type="text/javascript" charset="utf-8"></script>
<script src="http://mdaines.github.io/viz.js/bower_components/viz.js/viz.js" type="text/javascript"></script>
<script src="./web.bin.js" type="text/javascript"></script>
</body>
</html>