-
Notifications
You must be signed in to change notification settings - Fork 273
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #431 from reveloper/weekly_update_47
Weekly update 47
- Loading branch information
Showing
13 changed files
with
650 additions
and
16 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,92 @@ | ||
import ConceptImage from '@site/src/components/conceptImage'; | ||
import ThemedImage from '@theme/ThemedImage'; | ||
|
||
# Graphic Explanations Guidelines | ||
|
||
Maintaining consistency in documentation is crucial, and to achieve this, a specific standard for visualizing processes in smart contracts has been developed. | ||
|
||
## Graphic Explanation Notation | ||
|
||
### Message Processing Graph | ||
|
||
To depict message processing, it's advisable to utilize a graphical representation resembling a smart contract graph, complete with labels for transactions and messages. | ||
|
||
If the order of transactions doesn't matter, you can omit their labels. This simplifies the diagram, making it easier to read and understand the details related to messages and contracts. | ||
|
||
#### Annotation Primitives | ||
|
||
|Figure|Description| | ||
|------|-----------| | ||
|![](/img/docs/scheme-templates/message-processing-graphs/circle_for_smart_contract.svg?raw=true) | Circle - Smart Contract entity | | ||
|![](/img/docs/scheme-templates/message-processing-graphs/rectangle_for_regular_message.svg?raw=true) | Rectangle - Message Entity | | ||
|![](/img/docs/scheme-templates/message-processing-graphs/dashed_rectgl_for_optional_message.svg?raw=true) | Dashed Rectangle - Optional Message Entity | | ||
|![](/img/docs/scheme-templates/message-processing-graphs/line_for_transaction.svg?raw=true) | Transactions (numeration optional)| | ||
|![](/img/docs/scheme-templates/message-processing-graphs/person_figure_for_actor.svg?raw=true) | Actor| | ||
|
||
* Avoid using big quantity different and bright colors. | ||
* Use the modification of figures, such as using a dashed border line. | ||
* For better comprehension, different transactions could be displayed with distinct line styles (solid and dashed). | ||
|
||
|
||
#### Message Processing Example | ||
|
||
<br></br> | ||
<ThemedImage | ||
alt="" | ||
sources={{ | ||
light: '/img/docs/message-delivery/message_delivery_2.svg?raw=true', | ||
dark: '/img/docs/message-delivery/message_delivery_2.svg?raw=true', | ||
}} | ||
/> | ||
<br></br> | ||
|
||
|
||
|
||
Learn references directly from Visio [message-processing.vsdx](/static/schemes-visio/message-processing.vsdx). | ||
|
||
|
||
### Formats and Colors | ||
|
||
#### Fonts | ||
|
||
* **Inter** fonts family for all text within diagrams. | ||
|
||
#### Colors - Light Mode | ||
* Pencil Hand Drawn(default theme) | ||
|
||
#### Colors - Dark Mode | ||
* Font `#e3e3e3` | ||
* Background `#232328` | ||
* Light Highlight(arrows and scheme borders) `#058dd2` | ||
* Dark Highlight(arrows and scheme borders) `#0088cc` | ||
* InnerBackGround(for nested blocks) `#333337` | ||
|
||
|
||
#### Version Control Policy | ||
|
||
* Set diagrams in the documentation by SVG format for schemes to ensure readability on various devices. | ||
* Store original files in the project's Git repository under the "/static/visio" directory, making them easier to modify in the future. | ||
|
||
|
||
### Sequence Diagram | ||
In the case of complex and repetitive communication schemes between 2-3 actors, it is advisable to use a sequence diagram. For messages, use the notation of a common synchronous message arrow. | ||
|
||
#### Example | ||
|
||
<br></br> | ||
<div class="text--center"> | ||
<ThemedImage | ||
alt="" | ||
sources={{ | ||
light: '/img/docs/message-delivery/message_delivery_7.svg?raw=true', | ||
dark: '/img/docs/message-delivery/message_delivery_7.svg?raw=true', | ||
}} | ||
/> | ||
</div> | ||
<br></br> | ||
|
||
|
||
### Scheme References | ||
|
||
* [message-processing.vsdx](/schemes-visio/message_processing.vsdx) | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.