mermaid

test for mermaid

sequenceDiagram
    participant dotcom
    participant iframe
    participant viewscreen
    dotcom->>iframe: loads html w/ iframe url
    iframe->>viewscreen: request template
    viewscreen->>iframe: html & javascript
    iframe->>dotcom: iframe ready
    dotcom->>iframe: set mermaid data on iframe
    iframe->>iframe: render mermaid

Loading

SEQUENCE DIAGRAM:

User creating a new note on page https://studies.cs.helsinki.fi/exampleapp/notes by writing something into the text field and clicking Save button.

sequenceDiagram
    participant browser
    participant server
    browser->>server: POST https://studies.cs.helsinki.fi/exampleapp/new_note
    activate server
    server-->>browser: URL redirect to /exampleapp/notes
    deactivate server
    Note over browser, server: The server responds with HTTP status code 302, which tells the browser<br/>to redirect to the address defined in the header's Location ../notes.
    browser->>server: GET https://studies.cs.helsinki.fi/exampleapp/notes
    activate server
    server-->>browser: HTML document
    deactivate server
    browser->>server: GET https://studies.cs.helsinki.fi/exampleapp/main.css
    activate server
    server-->>browser: the CSS file
    deactivate server
    browser->>server: GET https://studies.cs.helsinki.fi/exampleapp/main.js
    activate server
    server-->>browser: the JavaScript file
    deactivate server
    Note right of browser: The browser starts executing the JavaScript doe that fetches the JSON from the server
    browser->>server: GET https://studies.cs.helsinki.fi/exampleapp/data.json
    activate server
    server-->>browser: [{"content": "HTML is easy", "date": "2023-1-1"}, ...]
    deactivate server
    Note right of browser: The browser executes the callback function that renders the notes

Loading

SEQUENCE DIAGRAM:

User goes to single-page app version of notes app at https://studies.cs.helsinki.fi/exampleapp/spa.

sequenceDiagram
    participant browser
    participant server
    browser->>server: GET https://studies.cs.helsinki.fi/exampleapp/spa
    activate server
    server-->>browser: HTML document
    deactivate server
    browser->>server: GET https://studies.cs.helsinki.fi/exampleapp/main.css
    activate server
    server-->>browser: the CSS file
    deactivate server
    browser->>server: GET https://studies.cs.helsinki.fi/exampleapp/spa.js
    activate server
    server-->>browser: the JavaScript file
    deactivate server
    Note right of browser: The browser starts executing the JavaScript code that fetches the JSON from the server
    browser->>server: GET https://studies.cs.helsinki.fi/exampleapp/data.json
    activate server
    server-->>browser: [{"content": "HTML is easy", "date": "2023-1-1"}, ...]
    deactivate server
    Note right of browser: The browser executes the callback function that renders the notes

Loading

SEQUENCE DIAGRAM:

User creates new note using the single-page version of notes app at https://studies.cs.helsinki.fi/exampleapp/spa.

sequenceDiagram
    participant browser
    participant server
    Note over browser, server: Save button is clicked, which submits the form and triggers event handler.<br/>Event handler pushes new note into notes array, redraws notes page using<br/>updated array, and then sends the new note to the server.
    browser->>browser: form.onsubmit = (e) => {...}
    browser->>server: POST https://studies.cs.helsinki.fi/exampleapp/new_note_spa
    activate server
    server-->>browser: Status 201 Created
    deactivate server
    activate server

Loading