JSFiddle - React, Tailwind, and code Playground

by ryanrolds

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
<script src="https://raw.github.com/bramp/js-sequence-diagrams/master/sequence-diagram-min.js"></script>
<div class="diagram">
    Title: Ground game communication
    participant Local Storage
    participant Ground Game
    participant Pita
    participant Query Server
    participant Moth
    participant PostgreSQL
    Ground Game -> Pita: Check in
    Pita ->> Ground Game: Check in result
    Note over Ground Game: If check in "ok", proceed
    Ground Game -> Local Storage: Get unsent answers
    Local Storage ->> Ground Game: Unsent answers
    Note over Ground Game: Group answers by CA DS
    Ground Game -> Pita: Send answer group 1
    Pita -> Query Server: Set answers
    Query Server --> PostgreSQL: Write DB
    Query Server ->> Pita: Set "ok"
    Pita ->> Ground Game: Group 1 "ok"
    Ground Game -> Pita: Send answer group 2
    Pita -> Query Server: Set answers
    Query Server --> PostgreSQL: Write DB
    Query Server ->> Pita: Set "ok"
    Pita ->> Ground Game: Group 2 "ok"
    Note over Ground Game: If "sets" "ok", proceed
    Ground Game -> Pita: Get campaigns
    Pita -> Moth: Get users' apps w/ GG addon
    Moth -> PostgreSQL: Get apps and addons
    PostgreSQL ->> Moth: Aps and addons
    Note over Moth: Filter out apps\nw/o GG addon
    Moth ->> Pita: GG apps
    Pita ->> Ground Game: Campaigns
    Ground Game -> Local Storage: Upsert campaigns
    Ground Game -> Pita: Get lists Campaign A
    Pita -> Query Server: Get universes for Campaign A
    Query Server ->> Pita: Universes 
    Note over Pita: Filter out non-walking universes
    Pita ->> Ground Game: Lists
    Ground Game -> Local Storage: Upsert lists
    Ground Game -> Pita: Get survey A
    Pita -> Moth: Get Survey A
    Moth ->> Pita: Survey A
    Pita ->> Ground Game: Survey A
    Ground Game...

JavaScript

$(".diagram").sequenceDiagram({theme: 'simple'});