Skip to content

Template For Adding Figures To Docs Markdown Files

Use this template when adding figures from docs/figures/ to ReaxKit documentation pages.

<a id="figure_anchor_name"></a>

Figure below shows the result produced by this workflow:

<div style="text-align:center;" markdown="1">
![short_descriptive_alt_text](relative/path/to/figure.png){ style="width:90%; max-width:800px;" }

*Figure: One-sentence caption explaining what the reader should notice.*
</div>

Concrete example:

<a id="all_things_in_reaxkit_by_category"></a>

Figure below shows a category-level map of major ReaxKit components.

<div style="text-align:center;" markdown="1">
![all_things_in_reaxkit_by_category](figures/all_things_in_reaxkit_by_category.png){ style="width:90%; max-width:800px;" }

*Figure: ReaxKit components organized by category.*
</div>

Path Rules

Figures should live in:

docs/figures/

Choose the relative path from the Markdown file you are editing:

docs/architecture_overview.md                  -> figures/example.png
docs/api/workflows/trajectory_workflow.md      -> ../../figures/example.png
docs/api/workflows/file_tools/ffield_workflow.md -> ../../../figures/example.png
docs/tutorials/01_understanding_quickstart.md  -> ../figures/example.png

Checklist

  • Put the image under docs/figures/.
  • Use a relative path from the current Markdown file.
  • Use style="width:85%; max-width:800px;" for plain images.
  • Use <div class="figure-large" markdown="1"> when adding captions.
  • Keep captions short and focused on what the figure demonstrates.