Mermaid Diagram Chat

Mermaid Diagram Stories.md

Mermaid story 1

sequenceDiagram
Markdown ->> Youssef: Hello, Youssef!
Markdown ->> Youssef: How are you?
Youssef ->> Markdown: I'm good, thanks!
Youssef ->> React: How about you, React?
React-->> Youssef: I'm good, thanks!<br>Also, I use other JavaScript libraries because I'm a JavaScript library<br>available on npm myself!
React-->> Markdown: How about you, Markdown?
Markdown ->> React: I'm relatively good enough for Christmas presents if I say so myself.<br>Like, I'm not even raging around in this Mermaid<br>diagram chat.
Mermaid--x Markdown: ENOUGH.
Markdown ->> Mermaid: *gasps*
Mermaid--x Markdown: YOU HAVE BEEN MESSING<br>AROUND WITH<br>MERMAID DIAGRAMS FOR ENOUGH TIME.<br>NOW STOP OR PERISH.
Markdown ->> Mermaid: Pssh.<br>This isn't even real. And I don't care,<br>Mermaid.
Note right of Markdown: Markdown unfortunately lied. It was real.<br>And Mermaid threw their spears at everybody,<br>but fortunately nobody got hit or died!<br>We're saved! Yay!

Loading

And it happily came to an end.

def thx(reader):
		print(f"Thanks for reading, {reader}!")
thx(reader_username)

const thx = <R extends string>(reader: R) => {
	console.log(`Thanks for reading, ${reader}!`);
};
thx(readerUsername);

Mermaid story 2

sequenceDiagram
React ->> Youssef: Hi, Youssef! Ready to create a new React project?
Youssef ->> React: Sure!
React ->> Youssef: OK, what template do you want to use?
TypeScript Template ->> Youssef: Pick me! I'm more strict and I allow types!
JavaScript Template ->> Youssef: No, pick ME! I'm more chill than TypeScript!
Youssef ->> TypeScript Template: You.
TypeScript Template ->> Youssef: Yay!
JavaScript Template ->> Youssef: Aww... :(
Note right of Node.js: Now processing data...
Note right of Node.js: Data processed! Now opening<br>another Mermaid diagram...

Loading

sequenceDiagram
Note right of Node.js: Now done opening<br>another Mermaid<br>diagram!
Youssef ->> Node.js: Thanks, Node.js.
Note right of Node.js: You're welcome,<br>Youssef!
TypeScript ->> React DOM: I will upgrade React functionality!
TypeScript ->> Youssef: I will upgrade React functionality!
React DOM ->> h1: Hey. You ready to become<br>a part of the React DOM?
h1 ->> React DOM: Sure. :)
h1 ->> i.fas.fa-circle-notch: Hey Font Awesome!<br>Wanna become a part of me?
i.fas.fa-circle-notch ->> h1: Sure! :)
Youssef ->> Node.js: *Ctrl+C*
Note left of Node.js: Now turning off servers in 3...
TypeScript ->> Node.js: WAIT NO
Note left of Node.js: 2...
h1 ->> Node.js: NO NO NO
i.fas.fa-circle-notch ->> Node.js: PLEASE DON'T DO THIS!
Note left of Node.js: 1...
React DOM ->> Node.js: NO!!!
Note right of Node.js: Turning off React DOM...
React DOM ->> Node.js: NOOOOO-
Node.js --x React DOM: *turns off React DOM*
Note right of Node.js: React DOM turned off.
Note right of Node.js: Turning off TypeScript...
TypeScript ->> Node.js: NO PLEASE-
Node.js --x TypeScript: *turns off TypeScript*
Note right of Node.js: TypeScript turned off.<br>All servers are shut down.
Note right of Node.js: The React session has ended.

Loading

Kinda dark, right?

const say = (...value: any[]) => {
	console.log(value);
};
say("Yes... It shouldn't be like this!");