mattduffield · June 17, 2021 00:13
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <head>
  <meta charset="utf-8">
  <title>Dumber Gist</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
  <base href="/">
 </head>
 <body>
 <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
 <script>
 mermaid.initialize({
  startOnLoad:true,
  securityLevel: 'loose',
  flowdiagram: {
    curve: 'basis' 
  }
 });
 </script>

  <h1>Shipment Status</h1>
  <div class="mermaid">

  stateDiagram-v2
    [*] --> open
    open --> supplier_contacted: contact_supplier
    note right of open
      Order has been received from the customer 
      but a corresponding request has not been
      sent to the supplier
    end note
    supplier_contacted --> scheduled: delivery_date_confirmed
    supplier_contacted --> exception
    note right of supplier_contacted
      Supplier has been contacted but not
      responded with a confirmed delivery
      date
    end note
    exception --> supplier_contacted: handle_exception
    state join_state <<join>>
    scheduled --> join_state: bol_sent_to_supplier
    scheduled --> join_state: confirmation_sent_to_customer
    note right of scheduled
      Supplier has confirmed a delivery
      date, BOL sent to supplier,
      confirmation sent to customer
    end note
    join_state --> delivered
    scheduled --> exception
    exception --> scheduled: handle_exception
    delivered --> ready_to_invoice: invoice_request
    delivered --> exception
    delivered --> pallet_rejected
    pallet_rejected --> [*]
    note right of delivered
      Order confirmed delivered, can be initiated
      by FALM user or supplier clicking thorugh
      e-mail
    end note
    exception --> delivered: handle_exception
    ready_to_invoice --> invoiced: invoice_completed
    ready_to_invoice --> exception
    exception --> ready_to_invoice: handle_exception
    invoiced --> closed: invoice_sent
    invoiced --> exception
    exception --> invoiced: handle_exception
    closed --> [*]
    
  
  </div>
  </body>
 </html>
diff --git a/package.json b/package.json
 {
  "dependencies": {
    "aurelia": "latest"
  }
 }
diff --git a/src\main.js b/src\main.js
 import Aurelia from 'aurelia';
 import { MyApp } from './my-app';

 Aurelia.app(MyApp).start();
diff --git a/src\my-app.html b/src\my-app.html
 <!--
 Try to create a paired css/scss/sass/less file like my-app.scss.
 It will be automatically imported based on convention.
 -->

 <!--
 There is no bundler config you can change in Dumber Gist to
 turn on shadow DOM.
 But you can turn shadow DOM on by adding a meta tag in every
 html template:
 <use-shadow-dom>
 -->
 <h1>${message}</h1>
 <div class="mermaid">
    graph TD
    A[Client] --> B[Load Balancer]
    B --> C[Server01]
    B --> D[Server02]
 </div>
diff --git a/src\my-app.js b/src\my-app.js
 export class MyApp {
  message = 'Hello Aurelia 2!';
  
  attaching() {
    mermaid.initialize({startOnLoad:true});
  }
 }
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Dumber Gist</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
	<base href="/">
	</head>
	<body>
	<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
	<script>
	mermaid.initialize({
	startOnLoad:true,
	securityLevel: 'loose',
	flowdiagram: {
	curve: 'basis'
	}
	});
	</script>

	<h1>Shipment Status</h1>
	<div class="mermaid">

	stateDiagram-v2
	[*] --> open
	open --> supplier_contacted: contact_supplier
	note right of open
	Order has been received from the customer
	but a corresponding request has not been
	sent to the supplier
	end note
	supplier_contacted --> scheduled: delivery_date_confirmed
	supplier_contacted --> exception
	note right of supplier_contacted
	Supplier has been contacted but not
	responded with a confirmed delivery
	date
	end note
	exception --> supplier_contacted: handle_exception
	state join_state <<join>>
	scheduled --> join_state: bol_sent_to_supplier
	scheduled --> join_state: confirmation_sent_to_customer
	note right of scheduled
	Supplier has confirmed a delivery
	date, BOL sent to supplier,
	confirmation sent to customer
	end note
	join_state --> delivered
	scheduled --> exception
	exception --> scheduled: handle_exception
	delivered --> ready_to_invoice: invoice_request
	delivered --> exception
	delivered --> pallet_rejected
	pallet_rejected --> [*]
	note right of delivered
	Order confirmed delivered, can be initiated
	by FALM user or supplier clicking thorugh
	e-mail
	end note
	exception --> delivered: handle_exception
	ready_to_invoice --> invoiced: invoice_completed
	ready_to_invoice --> exception
	exception --> ready_to_invoice: handle_exception
	invoiced --> closed: invoice_sent
	invoiced --> exception
	exception --> invoiced: handle_exception
	closed --> [*]


	</div>
	</body>
	</html>
	import Aurelia from 'aurelia';
	import { MyApp } from './my-app';

	Aurelia.app(MyApp).start();
	<!--
	Try to create a paired css/scss/sass/less file like my-app.scss.
	It will be automatically imported based on convention.
	-->

	<!--
	There is no bundler config you can change in Dumber Gist to
	turn on shadow DOM.
	But you can turn shadow DOM on by adding a meta tag in every
	html template:
	<use-shadow-dom>
	-->
	<h1>${message}</h1>
	<div class="mermaid">
	graph TD
	A[Client] --> B[Load Balancer]
	B --> C[Server01]
	B --> D[Server02]
	</div>
	export class MyApp {
	message = 'Hello Aurelia 2!';

	attaching() {
	mermaid.initialize({startOnLoad:true});
	}
	}