<div class="mermaid">
sequenceDiagram
  participant System
  participant App
  System->>App: Do you hear me
  App-->>Module: Alive?
  Module-->>App: Yay!
  App->>System: Stop
</div>
@import url(https://fonts.googleapis.com/css?family=Arvo:700italic);

body {
  background: #222;
  color: #fff;
  font-family: 'Arvo', serif;
  font-weight: 700;
  font-style: italic;
}
.actor {
  stroke-width: 2;
  stroke: #fff;
  fill: #222;
  font-family: 'Arvo', serif;
  font-weight: 700;
  font-style: italic;
}
text.actor {
  fill: #fff;
  stroke: none; 
}
.actor-line {
  stroke: #fff;
}
.messageLine0 {
  stroke-width: 1;
  marker-end: "url(#arrowhead)";
  stroke: #fff;
}
.messageLine1 {
  stroke-width: 1;
  stroke-dasharray: "2 2";
  stroke: #fff;
}
#arrowhead {
  fill: #fff;
}
.messageText {
  fill: #222;
  stroke: #fff;    
}
mermaid.initialize({
  startOnLoad: true
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/mermaid/0.5.1/mermaid.min.js