Added diagrams (#195)

docs/developers/cross-chain-messaging/examples/your-first-message.md

@@ -14,8 +14,8 @@ from one chain to another using the
 
 ## Prerequisites
 
-- [Node.js](https://nodejs.org/en/) v12 or later
-- [Yarn](https://yarnpkg.com/) v1 or later
+- [Node.js](https://nodejs.org/en/) (version 18 or above)
+- [Yarn](https://yarnpkg.com/)
 - [Git](https://git-scm.com/)
 
 ## Set up your environment

docs/developers/omnichain/overview.md

@@ -9,6 +9,41 @@ orchestrate assets on connected chains, as well as on ZetaChain. With omnichain
 smart contracts you are able to have a single place of logic that can maintain
 the state of assets and data across all connected chains.
 
+```mermaid
+flowchart LR
+  subgraph Ethereum ["Ethereum (Polygon or BSC)"]
+    direction LR
+    subgraph send ["Transaction"]
+      direction LR
+      Data -- contains --- Message("Message")
+      Data((Data)) -- contains --- address("Omnichain contract address")
+      Value((Value)) -- contains --- eth("1 ETH")
+    end
+    account("Account") -- sends --- send
+    send --> TSS("TSS Address")
+  end
+  subgraph ZetaChain
+    SystemContract("System Contract")
+    subgraph contract ["Omnichain contract"]
+      addr("Contract address")
+      subgraph onCrossChainCall
+        msg("bytes calldata message")
+        zrc20("address zrc20")
+        amount("uint256 amount")
+        context("zContext calldata context")
+      end
+    end
+  end
+  TSS --> SystemContract
+  SystemContract -- calls --> contract
+  address -.- addr
+  eth -. ETH ZRC-20 contract address .- zrc20
+  eth -. deposited amount .- amount
+  Ethereum -. chainID .- context
+  Message -.- msg
+  account -. "origin" .- context
+```
+
 For a contract to be considered omnichain it must inherit from the `zContract`
 interface and implement the `onCrossChainCall` function:
 

docs/developers/omnichain/tutorials/hello.md

@@ -9,8 +9,8 @@ ZetaChain and make a contract call from a connected chain.
 
 ## Prerequisites
 
-- [Node.js](https://nodejs.org/en/) v12 or later
-- [Yarn](https://yarnpkg.com/) v1 or later
+- [Node.js](https://nodejs.org/en/) (version 18 or above)
+- [Yarn](https://yarnpkg.com/)
 - [Git](https://git-scm.com/)
 
 ## Set Up Your Environment

docs/developers/omnichain/tutorials/staking.md

@@ -34,8 +34,8 @@ This tutorial shows how to:
 
 ## Prerequisites
 
-- [Node.js](https://nodejs.org/en/) v12 or later
-- [Yarn](https://yarnpkg.com/) v1 or later
+- [Node.js](https://nodejs.org/en/) (version 18 or above)
+- [Yarn](https://yarnpkg.com/)
 - [Git](https://git-scm.com/)
 
 ## Set Up Your Environment
@@ -91,6 +91,26 @@ Even though the `message` value will be encoded differently in EVM-based chains
 and Bitcoin, the first bytes of the `message` will always be the action code
 encoded as `uint8`.
 
+```mermaid
+flowchart LR
+  subgraph zetachain ["ZetaChain"]
+    contract("Staking contract")
+    system_contract("System contract")
+  end
+  subgraph connected_chain ["Connected chain"]
+    tss("TSS address")
+  end
+    user("User")
+    user -- stake --> tss
+    user -- unstake --> tss
+    user -- set beneficiary --> tss
+    user -- set withdraw --> tss
+    tss --> system_contract
+    system_contract -- calls --> contract
+    user -- claim rewards --> contract
+    user -- query rewards --> contract
+```
+
 ### Handle the Omnichain Contract Call
 
 ```solidity title="contracts/Staking.sol"

docs/developers/tokens.md

@@ -11,6 +11,25 @@ Code blocks with `hardhat` commands show helpful utilities for sending tokens
 available with the
 [smart contract template](https://github.com/zeta-chain/template).
 
+```mermaid
+flowchart
+  subgraph connected_chain ["Connected Chain"]
+    gas("Gas token or ERC-20")
+    evm_wzeta("Wrapped ZETA")
+  end
+  subgraph zetachain ["ZetaChain"]
+    zeta("Native ZETA")
+    zrc20("ZRC-20")
+    zevm_wzeta("Wrapped ZETA")
+  end
+  gas -- TSS: deposit --> zrc20
+  zrc20 -- TSS: withdraw --> gas
+  zeta -- wrap --> zevm_wzeta
+  zevm_wzeta -- unwrap --> zeta
+  zevm_wzeta -- connector: send --> evm_wzeta
+  evm_wzeta -- connector: send  --> zeta
+```
+
 ## Native ZETA Token on ZetaChain
 
 The native token of the ZetaChain is called ZETA. It is a staking token, and is
@@ -107,7 +126,7 @@ Depositing gETH to ZetaChain as ZRC-20:
 npx hardhat send-zrc20 --amount 1 --network goerli_testnet --destination zeta_testnet
 ```
 
-Withdrawing ZRC-20 from ZetaChain go Goerli as gETH:
+Withdrawing ZRC-20 from ZetaChain to Goerli as gETH:
 
 ```
 npx hardhat send-zrc20 --amount 1 --network zeta_testnet --destination goerli_testnet

package.json

@@ -108,4 +108,4 @@
       "disableShortCss": false
     }
   }
-}
+}