Documentation Views & Components

A small showcase of documentation-supporting components integrated and in various stages of planning/development as part of this spike.

Source Code

Source code is rendered using the Prism.js Syntax Highlighter. Additional attention can be called to specific lines by several forms of decoration.

import React from "react";

export const UniversalTag = ({ tag = none, children, className, ...other }) => {
  const ImplTag = tag ? tag : div;
  return (    <ImplTag {...other} className={className}>
      {" "}
      {children}
    </ImplTag>
  );
};

Directional Graph

Already demonstrated elsewhere are directional graphs; this example illustrates a few different shapes as well as direct styling of elements.

The directional graph and other following graphs are composed using Mermaid, which has extensive diagram syntax documentation as well as a live diagram editor.

Sequence Diagram

Another useful graph mermaid can render are sequence diagrams.

Class Diagram

Although probably less likely to find its way into these documents than the above variants, mermaid also supports the creation of UML-style class diagrams.

Schematic Drawing

A more flexible capability to display screens exists in the use of Scalable Vector Graphics, a widely supported drawing program export format.

Future development may support limited software interaction with SVG files, such as the display of annotations that highlight or point to the element or area of interest.