Skip to content

Instantly share code, notes, and snippets.

@didenko

didenko/mermaid_sd.html

Last active April 28, 2017 01:39
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 didenko/bfa25f04e4a5b6ca6c18145a96afa8e6 to your computer and use it in GitHub Desktop.
Save didenko/bfa25f04e4a5b6ca6c18145a96afa8e6 to your computer and use it in GitHub Desktop.
Download ZIP
mermaid diagramming library template
Raw
mermaid_sd.html
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.rawgit.com/knsv/mermaid/7.0.0/dist/mermaid.min.js"></script>
<script>mermaid.initialize({ startOnLoad: true });</script>
<style>
@import url('https://fonts.googleapis.com/css?family=Dosis');
body { width: 95%; margin: 1em auto; text-align: center; }
.note { width: 180px; }
.noteText { font-family: 'Dosis', sans-serif; }
</style>
</head>
<body>
<p style="font-family: 'Dosis'; font-size: 200%; font-variant: small-caps;">
<a href="https://knsv.github.io/mermaid/" target="_blank" style="color:darkolivegreen; text-decoration: none;">mermaid sequence diagram example</a>
</p>
<div class="mermaid">
sequenceDiagram
participant DB
participant Server
participant Client
participant GUI
Server-->>DB: CONNECT
DB-->>Server: CONNECTED
GUI->>+Client: ONLINE
Note over Client: readConfig
Client-->>Server: CONNECT
Server-->>Client: CONNECTED
Client->>+GUI: GET CREDENTIALS
Note over GUI: loginDialog
GUI->>-Client: CREDENTIALS
Note over Client: scrambleLogin
Client->>+Server: LOGIN
Server->>+DB: AUTH
Note over DB: authQuery
DB->>-Server: AUTH REPLY
Note over Server: newSession
Server->>-Client: LOGIN REPLY
Client->>-GUI: STATUS
</div>
</body>
</html>
@didenko
Copy link
Author

didenko commented Apr 28, 2017

Hot-linking is not encouraged!!! See the official mermaid website for vastly richer use cases and options.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment