docs: sending message diagram

2019-12-21 14:08:57 +00:00
1 parent daab409837
commit d24053aba3
@@ -13,3 +13,5 @@

 # Dependency directories (remove the comment below to include it)
 # vendor/
+
+.DS_Store
@@ -0,0 +1,12 @@
+sequenceDiagram
+  participant Alice
+  participant App A
+  participant Server A
+  participant Server B
+  participant App B
+  participant Bob
+  Alice ->> App A: Alice writes the message to Bob in the app
+  App A ->> Server A: the message (including ID & timestamp) is encrypted by <Alice-Bob public key> and sent to all Alice's servers<br>{from: <Bob-Alice key hash>, to: <Alice-Bob key hash>, message: <encrypted with Alice-Bob public key>}
+  Server A ->> Server B: Alice's servers use <Alice-Bob key hash> to locate Bob's servers<br>and forwards encrypted message to all Bob's servers (in case they are different from Alice's servers
+  Server B ->> App B: Bob's servers send the message to Bob's app
+  App B ->> Bob: Bob's app uses <Bob-Alice key hash> to identify Alice<br>and decrypts the message with <Bob-Alice private key> to show it
@@ -0,0 +1,494 @@
+<svg id="mermaid-1576936987542" width="100%" xmlns="http://www.w3.org/2000/svg" height="100%" style="max-width:1250px;" viewBox="-50 -10 1250 336"><style>
+
+
+
+#mermaid-1576936987542 .label {
+  font-family: 'trebuchet ms', verdana, arial;
+  font-family: var(--mermaid-font-family);
+  color: #333; }
+
+#mermaid-1576936987542 .label text {
+  fill: #333; }
+
+#mermaid-1576936987542 .node rect,
+#mermaid-1576936987542 .node circle,
+#mermaid-1576936987542 .node ellipse,
+#mermaid-1576936987542 .node polygon {
+  fill: #ECECFF;
+  stroke: #9370DB;
+  stroke-width: 1px; }
+
+#mermaid-1576936987542 .node .label {
+  text-align: center; }
+
+#mermaid-1576936987542 .node.clickable {
+  cursor: pointer; }
+
+#mermaid-1576936987542 .arrowheadPath {
+  fill: #333333; }
+
+#mermaid-1576936987542 .edgePath .path {
+  stroke: #333333;
+  stroke-width: 1.5px; }
+
+#mermaid-1576936987542 .edgeLabel {
+  background-color: #e8e8e8;
+  text-align: center; }
+
+#mermaid-1576936987542 .cluster rect {
+  fill: #ffffde;
+  stroke: #aaaa33;
+  stroke-width: 1px; }
+
+#mermaid-1576936987542 .cluster text {
+  fill: #333; }
+
+#mermaid-1576936987542 div.mermaidTooltip {
+  position: absolute;
+  text-align: center;
+  max-width: 200px;
+  padding: 2px;
+  font-family: 'trebuchet ms', verdana, arial;
+  font-family: var(--mermaid-font-family);
+  font-size: 12px;
+  background: #ffffde;
+  border: 1px solid #aaaa33;
+  border-radius: 2px;
+  pointer-events: none;
+  z-index: 100; }
+
+#mermaid-1576936987542 .actor {
+  stroke: #CCCCFF;
+  fill: #ECECFF; }
+
+#mermaid-1576936987542 text.actor {
+  fill: black;
+  stroke: none; }
+
+#mermaid-1576936987542 .actor-line {
+  stroke: grey; }
+
+#mermaid-1576936987542 .messageLine0 {
+  stroke-width: 1.5;
+  stroke-dasharray: '2 2';
+  stroke: #333; }
+
+#mermaid-1576936987542 .messageLine1 {
+  stroke-width: 1.5;
+  stroke-dasharray: '2 2';
+  stroke: #333; }
+
+#mermaid-1576936987542 #arrowhead {
+  fill: #333; }
+
+#mermaid-1576936987542 .sequenceNumber {
+  fill: white; }
+
+#mermaid-1576936987542 #sequencenumber {
+  fill: #333; }
+
+#mermaid-1576936987542 #crosshead path {
+  fill: #333 !important;
+  stroke: #333 !important; }
+
+#mermaid-1576936987542 .messageText {
+  fill: #333;
+  stroke: none; }
+
+#mermaid-1576936987542 .labelBox {
+  stroke: #CCCCFF;
+  fill: #ECECFF; }
+
+#mermaid-1576936987542 .labelText {
+  fill: black;
+  stroke: none; }
+
+#mermaid-1576936987542 .loopText {
+  fill: black;
+  stroke: none; }
+
+#mermaid-1576936987542 .loopLine {
+  stroke-width: 2;
+  stroke-dasharray: '2 2';
+  stroke: #CCCCFF; }
+
+#mermaid-1576936987542 .note {
+  stroke: #aaaa33;
+  fill: #fff5ad; }
+
+#mermaid-1576936987542 .noteText {
+  fill: black;
+  stroke: none;
+  font-family: 'trebuchet ms', verdana, arial;
+  font-family: var(--mermaid-font-family);
+  font-size: 14px; }
+
+#mermaid-1576936987542 .activation0 {
+  fill: #f4f4f4;
+  stroke: #666; }
+
+#mermaid-1576936987542 .activation1 {
+  fill: #f4f4f4;
+  stroke: #666; }
+
+#mermaid-1576936987542 .activation2 {
+  fill: #f4f4f4;
+  stroke: #666; }
+
+
+#mermaid-1576936987542 .mermaid-main-font {
+  font-family: "trebuchet ms", verdana, arial;
+  font-family: var(--mermaid-font-family); }
+
+#mermaid-1576936987542 .section {
+  stroke: none;
+  opacity: 0.2; }
+
+#mermaid-1576936987542 .section0 {
+  fill: rgba(102, 102, 255, 0.49); }
+
+#mermaid-1576936987542 .section2 {
+  fill: #fff400; }
+
+#mermaid-1576936987542 .section1,
+#mermaid-1576936987542 .section3 {
+  fill: white;
+  opacity: 0.2; }
+
+#mermaid-1576936987542 .sectionTitle0 {
+  fill: #333; }
+
+#mermaid-1576936987542 .sectionTitle1 {
+  fill: #333; }
+
+#mermaid-1576936987542 .sectionTitle2 {
+  fill: #333; }
+
+#mermaid-1576936987542 .sectionTitle3 {
+  fill: #333; }
+
+#mermaid-1576936987542 .sectionTitle {
+  text-anchor: start;
+  font-size: 11px;
+  text-height: 14px;
+  font-family: 'trebuchet ms', verdana, arial;
+  font-family: var(--mermaid-font-family); }
+
+
+#mermaid-1576936987542 .grid .tick {
+  stroke: lightgrey;
+  opacity: 0.3;
+  shape-rendering: crispEdges; }
+#mermaid-1576936987542   .grid .tick text {
+    font-family: 'trebuchet ms', verdana, arial;
+    font-family: var(--mermaid-font-family); }
+
+#mermaid-1576936987542 .grid path {
+  stroke-width: 0; }
+
+
+#mermaid-1576936987542 .today {
+  fill: none;
+  stroke: red;
+  stroke-width: 2px; }
+
+
+
+#mermaid-1576936987542 .task {
+  stroke-width: 2; }
+
+#mermaid-1576936987542 .taskText {
+  text-anchor: middle;
+  font-family: 'trebuchet ms', verdana, arial;
+  font-family: var(--mermaid-font-family); }
+
+#mermaid-1576936987542 .taskText:not([font-size]) {
+  font-size: 11px; }
+
+#mermaid-1576936987542 .taskTextOutsideRight {
+  fill: black;
+  text-anchor: start;
+  font-size: 11px;
+  font-family: 'trebuchet ms', verdana, arial;
+  font-family: var(--mermaid-font-family); }
+
+#mermaid-1576936987542 .taskTextOutsideLeft {
+  fill: black;
+  text-anchor: end;
+  font-size: 11px; }
+
+
+#mermaid-1576936987542 .task.clickable {
+  cursor: pointer; }
+
+#mermaid-1576936987542 .taskText.clickable {
+  cursor: pointer;
+  fill: #003163 !important;
+  font-weight: bold; }
+
+#mermaid-1576936987542 .taskTextOutsideLeft.clickable {
+  cursor: pointer;
+  fill: #003163 !important;
+  font-weight: bold; }
+
+#mermaid-1576936987542 .taskTextOutsideRight.clickable {
+  cursor: pointer;
+  fill: #003163 !important;
+  font-weight: bold; }
+
+
+#mermaid-1576936987542 .taskText0,
+#mermaid-1576936987542 .taskText1,
+#mermaid-1576936987542 .taskText2,
+#mermaid-1576936987542 .taskText3 {
+  fill: white; }
+
+#mermaid-1576936987542 .task0,
+#mermaid-1576936987542 .task1,
+#mermaid-1576936987542 .task2,
+#mermaid-1576936987542 .task3 {
+  fill: #8a90dd;
+  stroke: #534fbc; }
+
+#mermaid-1576936987542 .taskTextOutside0,
+#mermaid-1576936987542 .taskTextOutside2 {
+  fill: black; }
+
+#mermaid-1576936987542 .taskTextOutside1,
+#mermaid-1576936987542 .taskTextOutside3 {
+  fill: black; }
+
+
+#mermaid-1576936987542 .active0,
+#mermaid-1576936987542 .active1,
+#mermaid-1576936987542 .active2,
+#mermaid-1576936987542 .active3 {
+  fill: #bfc7ff;
+  stroke: #534fbc; }
+
+#mermaid-1576936987542 .activeText0,
+#mermaid-1576936987542 .activeText1,
+#mermaid-1576936987542 .activeText2,
+#mermaid-1576936987542 .activeText3 {
+  fill: black !important; }
+
+
+#mermaid-1576936987542 .done0,
+#mermaid-1576936987542 .done1,
+#mermaid-1576936987542 .done2,
+#mermaid-1576936987542 .done3 {
+  stroke: grey;
+  fill: lightgrey;
+  stroke-width: 2; }
+
+#mermaid-1576936987542 .doneText0,
+#mermaid-1576936987542 .doneText1,
+#mermaid-1576936987542 .doneText2,
+#mermaid-1576936987542 .doneText3 {
+  fill: black !important; }
+
+
+#mermaid-1576936987542 .crit0,
+#mermaid-1576936987542 .crit1,
+#mermaid-1576936987542 .crit2,
+#mermaid-1576936987542 .crit3 {
+  stroke: #ff8888;
+  fill: red;
+  stroke-width: 2; }
+
+#mermaid-1576936987542 .activeCrit0,
+#mermaid-1576936987542 .activeCrit1,
+#mermaid-1576936987542 .activeCrit2,
+#mermaid-1576936987542 .activeCrit3 {
+  stroke: #ff8888;
+  fill: #bfc7ff;
+  stroke-width: 2; }
+
+#mermaid-1576936987542 .doneCrit0,
+#mermaid-1576936987542 .doneCrit1,
+#mermaid-1576936987542 .doneCrit2,
+#mermaid-1576936987542 .doneCrit3 {
+  stroke: #ff8888;
+  fill: lightgrey;
+  stroke-width: 2;
+  cursor: pointer;
+  shape-rendering: crispEdges; }
+
+#mermaid-1576936987542 .milestone {
+  transform: rotate(45deg) scale(0.8, 0.8); }
+
+#mermaid-1576936987542 .milestoneText {
+  font-style: italic; }
+
+#mermaid-1576936987542 .doneCritText0,
+#mermaid-1576936987542 .doneCritText1,
+#mermaid-1576936987542 .doneCritText2,
+#mermaid-1576936987542 .doneCritText3 {
+  fill: black !important; }
+
+#mermaid-1576936987542 .activeCritText0,
+#mermaid-1576936987542 .activeCritText1,
+#mermaid-1576936987542 .activeCritText2,
+#mermaid-1576936987542 .activeCritText3 {
+  fill: black !important; }
+
+#mermaid-1576936987542 .titleText {
+  text-anchor: middle;
+  font-size: 18px;
+  fill: black;
+  font-family: 'trebuchet ms', verdana, arial;
+  font-family: var(--mermaid-font-family); }
+
+#mermaid-1576936987542 g.classGroup text {
+  fill: #9370DB;
+  stroke: none;
+  font-family: 'trebuchet ms', verdana, arial;
+  font-family: var(--mermaid-font-family);
+  font-size: 10px; }
+#mermaid-1576936987542   g.classGroup text .title {
+    font-weight: bolder; }
+
+#mermaid-1576936987542 g.classGroup rect {
+  fill: #ECECFF;
+  stroke: #9370DB; }
+
+#mermaid-1576936987542 g.classGroup line {
+  stroke: #9370DB;
+  stroke-width: 1; }
+
+#mermaid-1576936987542 .classLabel .box {
+  stroke: none;
+  stroke-width: 0;
+  fill: #ECECFF;
+  opacity: 0.5; }
+
+#mermaid-1576936987542 .classLabel .label {
+  fill: #9370DB;
+  font-size: 10px; }
+
+#mermaid-1576936987542 .relation {
+  stroke: #9370DB;
+  stroke-width: 1;
+  fill: none; }
+
+#mermaid-1576936987542 #compositionStart {
+  fill: #9370DB;
+  stroke: #9370DB;
+  stroke-width: 1; }
+
+#mermaid-1576936987542 #compositionEnd {
+  fill: #9370DB;
+  stroke: #9370DB;
+  stroke-width: 1; }
+
+#mermaid-1576936987542 #aggregationStart {
+  fill: #ECECFF;
+  stroke: #9370DB;
+  stroke-width: 1; }
+
+#mermaid-1576936987542 #aggregationEnd {
+  fill: #ECECFF;
+  stroke: #9370DB;
+  stroke-width: 1; }
+
+#mermaid-1576936987542 #dependencyStart {
+  fill: #9370DB;
+  stroke: #9370DB;
+  stroke-width: 1; }
+
+#mermaid-1576936987542 #dependencyEnd {
+  fill: #9370DB;
+  stroke: #9370DB;
+  stroke-width: 1; }
+
+#mermaid-1576936987542 #extensionStart {
+  fill: #9370DB;
+  stroke: #9370DB;
+  stroke-width: 1; }
+
+#mermaid-1576936987542 #extensionEnd {
+  fill: #9370DB;
+  stroke: #9370DB;
+  stroke-width: 1; }
+
+#mermaid-1576936987542 .commit-id,
+#mermaid-1576936987542 .commit-msg,
+#mermaid-1576936987542 .branch-label {
+  fill: lightgrey;
+  color: lightgrey;
+  font-family: 'trebuchet ms', verdana, arial;
+  font-family: var(--mermaid-font-family); }
+
+#mermaid-1576936987542 .pieTitleText {
+  text-anchor: middle;
+  font-size: 25px;
+  fill: black;
+  font-family: 'trebuchet ms', verdana, arial;
+  font-family: var(--mermaid-font-family); }
+
+#mermaid-1576936987542 .slice {
+  font-family: 'trebuchet ms', verdana, arial;
+  font-family: var(--mermaid-font-family); }
+
+#mermaid-1576936987542 g.stateGroup text {
+  fill: #9370DB;
+  stroke: none;
+  font-size: 10px;
+  font-family: 'trebuchet ms', verdana, arial;
+  font-family: var(--mermaid-font-family); }
+
+#mermaid-1576936987542 g.stateGroup text {
+  fill: #9370DB;
+  stroke: none;
+  font-size: 10px; }
+
+#mermaid-1576936987542 g.stateGroup .state-title {
+  font-weight: bolder;
+  fill: black; }
+
+#mermaid-1576936987542 g.stateGroup rect {
+  fill: #ECECFF;
+  stroke: #9370DB; }
+
+#mermaid-1576936987542 g.stateGroup line {
+  stroke: #9370DB;
+  stroke-width: 1; }
+
+#mermaid-1576936987542 .transition {
+  stroke: #9370DB;
+  stroke-width: 1;
+  fill: none; }
+
+#mermaid-1576936987542 .stateGroup .composit {
+  fill: white;
+  border-bottom: 1px; }
+
+#mermaid-1576936987542 .state-note {
+  stroke: #aaaa33;
+  fill: #fff5ad; }
+#mermaid-1576936987542   .state-note text {
+    fill: black;
+    stroke: none;
+    font-size: 10px; }
+
+#mermaid-1576936987542 .stateLabel .box {
+  stroke: none;
+  stroke-width: 0;
+  fill: #ECECFF;
+  opacity: 0.5; }
+
+#mermaid-1576936987542 .stateLabel text {
+  fill: black;
+  font-size: 10px;
+  font-weight: bold;
+  font-family: 'trebuchet ms', verdana, arial;
+  font-family: var(--mermaid-font-family); }
+
+:root {
+  --mermaid-font-family: '"trebuchet ms", verdana, arial';
+  --mermaid-font-family: "Comic Sans MS", "Comic Sans", cursive; }
+
+:root { --mermaid-font-family: "trebuchet ms", verdana, arial;}</style><style>#mermaid-1576936987542 {
+    color: rgba(0, 0, 0, 0.65);
+    font: ;
+  }</style><g></g><g><line id="actor5942" x1="75" y1="5" x2="75" y2="325" class="actor-line" stroke-width="0.5px" stroke="#999"></line><rect x="0" y="0" fill="#eaeaea" stroke="#666" width="150" height="65" rx="3" ry="3" class="actor"></rect><text x="75" y="32.5" dominant-baseline="central" alignment-baseline="central" class="actor" style="text-anchor: middle; font-size: 14px;"><tspan x="75" dy="0">Alice</tspan></text></g><g><line id="actor5943" x1="275" y1="5" x2="275" y2="325" class="actor-line" stroke-width="0.5px" stroke="#999"></line><rect x="200" y="0" fill="#eaeaea" stroke="#666" width="150" height="65" rx="3" ry="3" class="actor"></rect><text x="275" y="32.5" dominant-baseline="central" alignment-baseline="central" class="actor" style="text-anchor: middle; font-size: 14px;"><tspan x="275" dy="0">App A</tspan></text></g><g><line id="actor5944" x1="475" y1="5" x2="475" y2="325" class="actor-line" stroke-width="0.5px" stroke="#999"></line><rect x="400" y="0" fill="#eaeaea" stroke="#666" width="150" height="65" rx="3" ry="3" class="actor"></rect><text x="475" y="32.5" dominant-baseline="central" alignment-baseline="central" class="actor" style="text-anchor: middle; font-size: 14px;"><tspan x="475" dy="0">Server A</tspan></text></g><g><line id="actor5945" x1="675" y1="5" x2="675" y2="325" class="actor-line" stroke-width="0.5px" stroke="#999"></line><rect x="600" y="0" fill="#eaeaea" stroke="#666" width="150" height="65" rx="3" ry="3" class="actor"></rect><text x="675" y="32.5" dominant-baseline="central" alignment-baseline="central" class="actor" style="text-anchor: middle; font-size: 14px;"><tspan x="675" dy="0">Server B</tspan></text></g><g><line id="actor5946" x1="875" y1="5" x2="875" y2="325" class="actor-line" stroke-width="0.5px" stroke="#999"></line><rect x="800" y="0" fill="#eaeaea" stroke="#666" width="150" height="65" rx="3" ry="3" class="actor"></rect><text x="875" y="32.5" dominant-baseline="central" alignment-baseline="central" class="actor" style="text-anchor: middle; font-size: 14px;"><tspan x="875" dy="0">App B</tspan></text></g><g><line id="actor5947" x1="1075" y1="5" x2="1075" y2="325" class="actor-line" stroke-width="0.5px" stroke="#999"></line><rect x="1000" y="0" fill="#eaeaea" stroke="#666" width="150" height="65" rx="3" ry="3" class="actor"></rect><text x="1075" y="32.5" dominant-baseline="central" alignment-baseline="central" class="actor" style="text-anchor: middle; font-size: 14px;"><tspan x="1075" dy="0">Bob</tspan></text></g><defs><marker id="arrowhead" refX="5" refY="2" markerWidth="6" markerHeight="4" orient="auto"><path d="M 0,0 V 4 L6,2 Z"></path></marker></defs><defs><marker id="crosshead" markerWidth="15" markerHeight="8" orient="auto" refX="16" refY="4"><path fill="black" stroke="#000000" stroke-width="1px" d="M 9,2 V 6 L16,4 Z" style="stroke-dasharray: 0, 0;"></path><path fill="none" stroke="#000000" stroke-width="1px" d="M 0,1 L 6,7 M 6,1 L 0,7" style="stroke-dasharray: 0, 0;"></path></marker></defs><defs><marker id="sequencenumber" refX="15" refY="15" markerWidth="60" markerHeight="40" orient="auto"><circle cx="15" cy="15" r="6"></circle></marker></defs><g><text x="175" y="93" class="messageText" style="text-anchor: middle;">Alice writes the message to Bob in the app</text><line x1="75" y1="100" x2="275" y2="100" class="messageLine0" stroke-width="2" stroke="black" marker-end="url(#arrowhead)" style="fill: none;"></line></g><g><text x="375" y="128" class="messageText" style="text-anchor: middle;">the message (including ID &amp; timestamp) is encrypted by &lt;Alice-Bob public key&gt; and sent to all Alice's servers</text><text x="375" y="145" class="messageText" style="text-anchor: middle;">{from: &lt;Bob-Alice key hash&gt;, to: &lt;Alice-Bob key hash&gt;, message: &lt;encrypted with Alice-Bob public key&gt;}</text><line x1="275" y1="135" x2="475" y2="135" class="messageLine0" stroke-width="2" stroke="black" marker-end="url(#arrowhead)" style="fill: none;"></line></g><g><text x="575" y="163" class="messageText" style="text-anchor: middle;">Alice's servers use &lt;Alice-Bob key hash&gt; to locate Bob's servers</text><text x="575" y="180" class="messageText" style="text-anchor: middle;">and forwards encrypted message to all Bob's servers (in case they are different from Alice's servers</text><line x1="475" y1="170" x2="675" y2="170" class="messageLine0" stroke-width="2" stroke="black" marker-end="url(#arrowhead)" style="fill: none;"></line></g><g><text x="775" y="198" class="messageText" style="text-anchor: middle;">Bob's servers send the message to Bob's app</text><line x1="675" y1="205" x2="875" y2="205" class="messageLine0" stroke-width="2" stroke="black" marker-end="url(#arrowhead)" style="fill: none;"></line></g><g><text x="975" y="233" class="messageText" style="text-anchor: middle;">Bob's app uses &lt;Bob-Alice key hash&gt; to identify Alice</text><text x="975" y="250" class="messageText" style="text-anchor: middle;">and decrypts the message with &lt;Bob-Alice prLine truncated
@@ -71,4 +71,10 @@ Client apps should provide the following:
  - optionally define the server(s) they trust and will connect to, including the servers that require server key to access.
  - optionally require that connected users connect to one of the servers they trust when sending messages to the user profile.
  - store history of all conversations encrypted using user client app password (or some other device specific encryption mechanism).
-  
+
+
+## Sequence diagrams
+
+### Sending message
+
+![Sending message](/diagrams/message.svg)