CodeTour is a Visual Studio Code (VSCode) extension which allows you to record and play back guided walkthroughs of your codebases
e.g. used for readme.md files and other markdown files in repos Reference
- https://emojipedia.org/
- You can use the emoji markup:
:boom: - Or you can just copy the image/character from that webpage:
๐ฅ - Recommended images:
Emoji Tags โธ๏ธ helm ๐ณ docker ๐ฆ package ๐ directory, folder โฌ๏ธ up, upload, push, publish โฌ๏ธ down, get, download ๐งน clean, delete โฐ๏ธ overview, summary ๐ log ๐ฌ log โน๏ธ information ๐ search ๐ global ๐ก home ๐ eyes, watching, review, read ๐งฎ abacus, calculate, determine ๐งช testing ๐ test results ๐ chart up, increase, code coverage, analysis ๐ chart down, lower, code coverage, analysis ๐ต๏ธ security, inspect ๐ฎ police, authorize, validate, gatekeeper, gate ๐ง wizard, mage, script โจ sparkles, magic ๐ฎ crystal ball, waiting ๐ฆ unicorn, special โ๏ธ settings, configuration ๐ท construction, worker, configure, change ๐ญ assemble, construct, build ๐๏ธ develop, create, terraform โ umbrella, protection, guard ๐ secure, protect ๐ secure, protect ๐ key, unlock, credentials, user ๐ running, fast ๐ snail, slow โก lightening ๐ good, positive ๐ bad, negative โญ star ๐ trophy, complete, success ๐ฏ bullseye โ๏ธ success โ cross, x, error, failed ๐ฅ errors, failed ๐ฉ issue, flag ๐ notify, bell ๐ข loudspeaker, alert โ ๏ธ warning ๐ stop ๐ซ prohibited ๐ฒ astonished, shocked ๐ค frustrated โค๏ธ heart, love ๐ฅ drum ๐งฉ puzzle ๐ค sleep, wait โณ hourglass, wait โ watch, timer โฒ๏ธ timer clock โฑ๏ธ timer, wait, stopwatch โฐ alarm ๐ calendar, schedule ๐ graduate ๐ป laptop ๐ mute, silent โ๏ธ sun ๐ป sunflower ๐ฅ fire โถ๏ธ play โธ๏ธ pause โน๏ธ stop ๐ repeat โพ๏ธ infinity ใฐ๏ธ wavy dash ๐ข status green ๐ก status yellow ๐ด status red โช status neutral โซ status null ๐ link
Mermaid lets you create diagrams and visualizations using text and code.
- Mermaid Live editor allows you to create the following diagrams
- Flow chart
- Sequence diagram
- Class diagram
- State diagram
- Gantt chart
- Pie chart
- ER (entity relationship) diagram
- User journey
- Once created, you can copy a link to the markdown and put it in your markdown file, or save the image as PNG/SVG
<!---
this is a markdown comment
---># title
## title
### title
#### title
##### title
###### title
- this is
**bold**text. [preferred] - this is
__bold__text.
- this is
*italic*text. [preferred] - this is
_italic_text.
- this is
***bold and italic***text. [preferred] - this is
___bold and italic___text.
Start-Thing -Env Dev -App Batch
- Use three backtick, and no need to indent
- Add syntax highlighting by adding language after backtick
- Language support
- JSON
- PWSH, PowerShell
- XML
- YAML
Start-Thing -Env Dev -App Batchvariables:
- name: myVarName
value: someValue> this is a blockquote
example
---***
| Syntax | Description |
|---|---|
| Header | Title |
| Paragraph | Text |
[Duck Duck Go](https://duckduckgo.com "The best search engine for privacy").
[HeaderName](#HeaderName)
<https://www.markdownguide.org><[email protected]>
1. first
2. second
3. third* item
* item
* item
or
<img src="mypic.jpg" alt="this is my pic">Use HTML tags instead of standard markdown based on your preferences.
- Image tags:
<img src="mypic.jpg" alt="this is my pic">
- Text/background color
- Flowcharts are helpful in a variety of scenarios
- Document a process and visualize ideas
- Not everyone on your team will have the time (or resources) to read through a complicated and lengthy process document. A flowchart allows everyone to follow the workflow, understand the tasks, and analyze the individual steps quickly and easily.
- Make a justify decisions
- Organize teams and tasks
- Identify bottlenecks or issues
- Standardize processes
- Track progress
- Document a process and visualize ideas
- In Business, there are generally 5 types of flowcharts
- Decision to make or justify a step
- Logic to uncover and prevent issues
- System to represent data flow
- Product to visualize product creation process
- Process to display process outcomes
Definitions:
- Data Flow Diagram (DFD) ...[todo]
- Process Flow Diagram (PFD) ...[todo]
- Workflow diagram (WFD) is an end-to-end process that helps teams meet their goals by connecting the right people to the right data at the right time
Steps:
- Define the scope of your project:
- Before you hit the drawing board or open your flowchart maker, define your project scope and process purpose. Ask yourself what your project should accomplish and what appropriate beginning and end dates are.
- Identify tasks in chronological order:
- Depending on the kind of flowchart youโre creating, you may want to review existing documentation, interview team members on their past experiences, or observe an existing process. It can help to write down some of the steps as a list before you create your first flowchart draft.
- Organize tasks by type and symbol:
- Once you have all of your tasks written out and organized chronologically, assign them to their corresponding symbol so youโre prepared to draw your flowchart.
- Draw your flowchart:
- You can sketch it out by hand or use a flowchart maker or flowchart software to create a flowchart that you can easily share with your team.
- Confirm and refine your flowchart:
- Getting a second, third, or even fourth set of eyes on your flowchart will help you uncover bottlenecks or potential problems and allow you to refine the flowchart before the process starts.
All flowcharts are composed of nodes (the geometric shapes) and links (the arrows or lines).
| Node Shapes | Usage |
|---|---|
| rectangle shape with square edges | process |
| rectangle shape with round edges | alternate process, usually connected with dotted line |
| stadium shape (rectangle with very rounded sides) | start, end |
| rectangle in a subroutine (rectangle with vertical lines on both sides) | pre-defined series of steps to perform a task, i.e. a function |
| cylindrical shape (database) | store data |
| circle shape | connector used to join different flow lines, inspection point |
| rhombus shape (diamond) | decision |
| hexagon shape (6-sided) | preparation |
| parallelogram shape (rectangle leaning right or left) | data input, output |
| trapezoid shape (rectangle with skinnier top or bottom) | manual operation |
| triangle (pointing up or down) | merge, extract |
| pentagon | off-page link or connector |
Link show relationships between nodes
| Link Style | Usage |
|---|---|
| solid line | primary flow |
| dotted line | alternate flow |
| thick solid line | |
| arrowhead end | direction of process flow |
| circle end | |
| X end |
Each line can optionally have text
Subgraphs show smaller groups of nodes and how they interact with other groups of nodes, or individual nodes within those groups
Swimlanes help show cross-team processes, where each lane will hold nodes for a respective team
- Create diagrams here
- Documentation
- Can create diagrams here too
- GitHub Diagrams with Mermaid
stateDiagram-v2 [*] --> Still Still --> [*] Still --> Moving Moving --> Still Moving --> Crash Crash --> [*]
digraph PolicyState { size="8,5" node [shape = doublecircle]; Unwritten; node [shape = rectangle style=filled]; Void Cancelled; node [shape = circle]; Unwritten -> Open [ label = "Open" ]; Unwritten -> Void[ label = "Void" ]; Open -> Cancelled [ label = "Cancel" ]; Open -> Closed [label = "Close" ]; Open -> Open [label = "Update"]; Open -> Void [label = "Void"]; Closed -> Open [label = "Open"]; Void [color="0.000 1.000 1.000"]; Cancelled [color="0.201 0.753 1.000"]; }- Not sure when ADO will support Mermaid
Tree cmd graphically displays the folder structure of a drive or path.
TREE [drive:][path] [/F] [/A]
/F Display the names of the files in each folder.
/A Use ASCII instead of extended characters.
โ buildver.txt
โ RolloutSpec.json
โ ScopeBindings.json
โ ServiceModel.json
โ
โโโโbin
โ WebApp.zip
โ
โโโโParameters
โ WebApp.Parameters.json
โ WebApp.RolloutParameters.json
โ
โโโโTemplates
WebApp.Template.json
Could use these character manually as well:
- โ
- โ
- โ
- โ
If you need to convert files from one markup format into another, pandoc is your swiss-army knife.