Flowchart
Confluence Gliffy Flowchart
The following diagram was created within this Confluence page, using a Gliffy macro.
Markdown Flowchart via DocDock Mermaid Shortcode
In a Hugo project with the DocDock theme, the following markdown code produces a similar diagram.
{{<mermaid align="left">}} graph TD; A(Start) --> B B[Submitter submits trial.] --> |Trial has Submitted status.| C{Submission complete?} C -->|No| D[CTRO asks submitter for information.] D -->|Trial is on hold.| E[Submitter provides requested information.] E -->|Trial is off hold.| C C -->|Yes| F(End) {{< /mermaid >}}
Markdown Flowchart via Mermaid Live Editor
In the Mermaid Live Editor, the following markdown code produces a similar diagram.
graph TD; A(Start) --> B B[Submitter submits trial.] --> |Trial has Submitted status.| C{Submission complete?} C -->|No| D[CTRO asks submitter for information.] D -->|Trial is on hold.| E[Submitter provides requested information.] E -->|Trial is off hold.| C C -->|Yes| F(End)
Expand/Collapse Image
Expand Confluence Macro
Expand as DocDock Shortcode Markdown
The following code block demonstrates implementation of the Expand shortcode for Hugo DockDock:
1. Click the **Search Clinical Trials** tab. Or, on the toolbar, click **Search** > **Clinical Trials**. The Search Clinical Trials page appears. {{%expand "Click for Screen Shot" %}} ![Search Clinical Trials page](https://wiki.nci.nih.gov/download/attachments/333338131/trial-search.png) {{% /expand%}} 1. In the various fields, specify one or more search criteria.
The above code produces the following results:
- By default, the image is hidden:
- After the initial click, the image is visible:
Thumbnail Image
Thumbnail in DocDock Markdown
The following code block demonstrates implementation of a thumbnail for Hugo DockDock, as described in Resizing image:
1. Click the **Search Clinical Trials** tab. Or, on the toolbar, click **Search** > **Clinical Trials**. The Search Clinical Trials page appears. ![Search Clinical Trials page](https://wiki.nci.nih.gov/download/attachments/333338131/trial-search.png?height=80px) 1. In the various fields, specify one or more search criteria.
The above code produces the following results:
- By default, the image appears as indicated in the HTTP parameter:
- After click, the image expands to fill the window.
Office Powerpoint macro
Animated GIF
Created using SnagIt 2018.
Video