Skip to content

Instantly share code, notes, and snippets.

@wilmoore

wilmoore/index.html

Last active April 30, 2024 18:59
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save wilmoore/a2f49d100b3f7952a903 to your computer and use it in GitHub Desktop.
Save wilmoore/a2f49d100b3f7952a903 to your computer and use it in GitHub Desktop.
Download ZIP
Software Engineering :: Programming :: Languages :: JavaScript :: ECMAScript :: ES6 :: ES6-driven Sequence Diagram Editor
Raw
readme.md

Software Engineering :: Programming :: Languages :: JavaScript :: ECMAScript :: ES6 :: ES6-driven Sequence Diagram Editor

⪼ Made with 💜 by Polyglot.

Raw
index.html
<style id="jsbin-css">
body {
background-color: #ffffff;
}
</style>
<meta name="description" content="ES6-driven Sequence Diagram Editor" />
<body>
<div id="output"></div>
<script src="http://google.github.io/traceur-compiler/bin/traceur.js"></script>
<script src="http://google.github.io/traceur-compiler/src/bootstrap.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="http://jashkenas.github.io/underscore/underscore-min.js"></script>
<script src="http://bramp.github.io/js-sequence-diagrams/sequence-diagram-min.js"></script>
<script type="module">
traceur.options.experimental = true;
var options = {
theme: 'simple', // 'simple|hand'
scale: 1
}
var diagram = `
Title: Concierge User & Content Authorization
Concierge-->Concierge Service: Login (user/email, password)
Concierge Service-->Identity: POST /api/v0/auth/login
Identity->Concierge Service: 201 (userId), 403, 422
Concierge-->Concierge Service: /subjects
Concierge Service-->Sponsor Tag Service: /:userId/sponsors
Sponsor Tag Service->Concierge Service: Sponsor[]
Concierge Service->Concierge Service: subjects({ client: Sponsor[] })
Concierge Service->Concierge: Subject[]
`
Diagram.parse(diagram).drawSVG(output, options);
</script>
<script id="jsbin-source-html" type="text/html"><meta name="description" content="ES6-driven Sequence Diagram Editor" />
<body>
<div id="output"></div>
<script src="//google.github.io/traceur-compiler/bin/traceur.js"><\/script>
<script src="//google.github.io/traceur-compiler/src/bootstrap.js"><\/script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"><\/script>
<script src="//jashkenas.github.io/underscore/underscore-min.js"><\/script>
<script src="//bramp.github.io/js-sequence-diagrams/sequence-diagram-min.js"><\/script>
<script type="module">
traceur.options.experimental = true;
var options = {
theme: 'simple', // 'simple|hand'
scale: 1
}
var diagram = `
Title: Concierge User & Content Authorization
Concierge-->Concierge Service: Login (user/email, password)
Concierge Service-->Identity: POST /api/v0/auth/login
Identity->Concierge Service: 201 (userId), 403, 422
Concierge-->Concierge Service: /subjects
Concierge Service-->Sponsor Tag Service: /:userId/sponsors
Sponsor Tag Service->Concierge Service: Sponsor[]
Concierge Service->Concierge Service: subjects({ client: Sponsor[] })
Concierge Service->Concierge: Subject[]
`
Diagram.parse(diagram).drawSVG(output, options);
<\/script>
</body></script>
</body>
Raw
jsbin.tagafafavi.css
body {
background-color: #ffffff;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment