DocOps.io Extension Server Examples
1. Introduction
The DocOps.io Extension Server provides a variety of extensions for enhancing your AsciiDoctor documents with rich visualizations. This guide showcases examples of the different types of visualizations you can create using the DocOps.io extensions.
This document serves as a comprehensive reference of examples that demonstrate the capabilities of the DocOps.io Extension Server, helping you quickly implement these visualizations in your own documentation.
2. Shields & Badges Examples
Shields and badges are useful for displaying status information, version numbers, build status, and other metadata in a visually consistent way.
2.2. Multiple Shields Example
[docops,badge]
----
Made With|Kotlin||#06133b|#6fc441|<Kotlin>|#fcfcfc
JVM|Runtime||#acacac|#3B1E54|<Java>|#fcfcfc
AsciiDoctor|Documentation||#acacac|#4CC9FE|<asciidoctor>|#fcfcfc
----
2.3. JSON Format Example
[docops,badge]
----
[
{
"label": "Status",
"message": "Stable",
"labelColor": "#3C3D37",
"messageColor": "#4CC9F0"
},
{
"label": "Version",
"message": "1.0.0",
"labelColor": "#0D47A1",
"messageColor": "#2196F3",
"url": "https://example.com/version",
"logo": "<github>",
"fontColor": "#fcfcfc"
}
]
----
For more detailed information about shields, see the Shield Documentation.
3. Chart Examples
DocOps.io Extension Server supports various types of charts to visualize data in your documentation.
3.1. Bar Chart Example
[docops,bar]
----
{
"title": "Berry Picking by Month 2024",
"yLabel": "Number of Sales",
"xLabel": "Month",
"series": [
{"label": "Jan","value": 120.0},
{"label": "Feb","value": 334.0},
{"label": "Mar","value": 455.0},
{"label": "Apr","value": 244.0},
{"label": "May","value": 256.0},
{"label": "Jun","value": 223.0}
],
"display": {"baseColor": "#4361ee","vBar": true}
}
----
3.2. Line Chart Example
[docops,bar]
----
{
"title": "Point on graph",
"points": [
{
"label": "Sales",
"points": [
{"label": "Jan","y": 40.0},
{"label": "Feb","y": 70.0},
{"label": "Mar","y": 90.0},
{"label": "Apr","y": 70.0},
{"label": "May","y": 40.0},
{"label": "Jun","y": 30.0},
{"label": "Jul","y": 60.0},
{"label": "Aug","y": 90.0},
{"label": "Sept","y": 70.0}
]
},
{
"label": "Marketing",
"points": [
{"label": "Jan","y": 22.0},
{"label": "Feb","y": 33.0},
{"label": "Mar","y": 44.0},
{"label": "Apr","y": 55.0},
{"label": "May","y": 66.0},
{"label": "Jun","y": 77.0},
{"label": "Jul","y": 88.0},
{"label": "Aug","y": 109.0},
{"label": "Sept","y": 110.0}
]
}
],
"display": {"smoothLines": true}
}
----
For more detailed information about charts, see the Charts Documentation.
4. Button Examples
DocOps.io Extension Server allows you to create interactive buttons with various styles and layouts.
4.1. Hexagonal Buttons Example
[docops,buttons]
----
{
"buttons": [
{
"label": "Amazon",
"link": "https://www.amazon.com",
"description": "E-commerce, cloud computing, digital streaming",
"embeddedImage": {"ref": "<Amazon>"}
},
{
"label": "Apple",
"link": "https://www.apple.com",
"description": "Consumer electronics, software and services",
"embeddedImage": {"ref": "<Apple>"}
},
{
"label": "DocOps.io",
"link": "https://docops.io",
"description": "Documentation experience for developers",
"embeddedImage": {"ref": "images/docops.svg"}
}
],
"buttonType": "HEX",
"theme": {"hexLinesEnabled": true,"strokeColor": "#7695FF","colors": ["#353d4b"],"scale": 1,"columns": 3}
}
----
For more detailed information about buttons, see the Buttons Documentation.
5. Connector Examples
Connectors help you create flow diagrams and visualize relationships between components.
5.1. Flow Connector Example
[docops,connector,useDark=false]
----
{
"connectors": [
{"text": "Engineer","description": "Creates tests"},
{"text": "Unit Tests","description": "Run Unit Tests"},
{"text": "GitHub","description": "Upload to Github"},
{"text": "Test Engine","description": "GitHub webhook plugged into engine"},
{"text": "GitHub","description": "Results stored in Github"},
{"text": "API Documentation","description": "API documentation ready for consumption"}
]
}
----
For more detailed information about connectors, see the Connectors Documentation.
6. Architecture Decision Records (ADR) Examples
ADRs help document and visualize architecture decisions with context, rationale, and status.
6.1. ADR Example
[docops,adr,useDark=false,role=center]
----
title: Use Elasticsearch for Search Functionality
status: Accepted
date: 2024-05-15
context:
- Our application needs robust search capabilities across multiple data types
- We need to support full-text search with relevance ranking
- The search functionality must scale with growing data volumes
- We need to support faceted search and filtering
decision:
- We will use Elasticsearch as our search engine
- We will integrate it with our existing PostgreSQL database
- We will implement a synchronization mechanism to keep data in sync
consequences:
- Improved search performance and capabilities
- Additional infrastructure to maintain
- Need for expertise in Elasticsearch configuration and optimization
- Potential complexity in keeping data synchronized
participants:
Jane Smith (Architect), John Doe (Developer),Alice Johnson (Product Manager)
----
For more detailed information about ADRs, see the ADR Documentation.
7. Placemat & Planner Examples
Placemats and planners help organize content and create visual project plans.
7.1. Placemat Example
[docops,placemat,useDark=false]
----
{
"title": "System Architecture Overview",
"placeMats": [
{"name": "Frontend","legend": "UI"},
{"name": "Backend","legend": "API"},
{"name": "Database","legend": "DATA"}
],
"config": {
"legend": [
{"legend": "UI","color": "#4361ee"},
{"legend": "API","color": "#3a0ca3"},
{"legend": "DATA","color": "#7209b7"}
]}
}
----
7.2. Project Planner Example
[docops,roadmap,useDark=false, title="Q3 Development Roadmap", scale="2.2"]
----
- now Authentication
* Implement user authentication system
* Set up CI/CD pipeline
* Create database schema
- next REST
* Develop REST API endpoints
* Build frontend components
* Implement search functionality
- later Analytics
* Add analytics dashboard
* Optimize performance
* Implement advanced features
- done Requirements
* Project requirements gathering
* Architecture design
* Technology stack selection
----
For more detailed information about placemats and planners, see the Placemat Documentation and Planner Documentation.
8. Release Strategy Examples
Release strategies help visualize release plans, roadmaps, and deployment strategies.
8.1. Release Strategy Example
[docops,release]
----
{
"title": "Product Release Strategy",
"style": "TLS", "scale": 0.5,
"releases": [
{
"type": "M1",
"date": "2023-01-15",
"goal": "Initial Planning",
"lines": [
"Define release scope and objectives",
"Identify key features and enhancements",
"Create detailed project timeline",
"Allocate resources and responsibilities"
]
},
{
"type": "M2",
"date": "2023-02-15",
"goal": "Development Phase",
"lines": [
"Code development and unit testing",
"Integration of components",
"Documentation updates",
"Internal code reviews"
]
},
{
"type": "RC1",
"date": "2023-03-15",
"goal": "Testing Phase",
"lines": [
"Functional testing",
"Performance testing",
"Security testing",
"User acceptance testing"
]
},
{
"type": "GA",
"date": "2023-04-15",
"goal": "Deployment Phase",
"lines": [
"Final approval and sign-off",
"Production deployment",
"Post-deployment verification",
"Monitoring and support"
]
}
]
}
----
For more detailed information about release strategies, see the Release Strategy Documentation.
9. Scorecard Examples
Scorecards help create visual metrics dashboards for project tracking and comparison.
9.1. Scorecard Example
[docops,scorecard]
----
{
"title": "Technology Comparison",
"initiativeTitle": "Current Solution",
"outcomeTitle": "Proposed Solution",
"initiativeItems": [
{"displayText":"Limited scalability"},
{"displayText":"High maintenance costs"},
{"displayText":"Manual deployment process"},
{"displayText":"Minimal monitoring capabilities"},
{"displayText":"Difficult to extend"}
],
"outcomeItems": [
{"displayText":"Highly scalable architecture"},
{"displayText":"Reduced operational costs"},
{"displayText":"Automated CI/CD pipeline"},
{"displayText":"Comprehensive monitoring"},
{"displayText":"Modular and extensible design"}
]
}
----
For more detailed information about scorecards, see the Scorecard Documentation.
10. Timeline Examples
Timelines help create interactive visualizations for project history, roadmaps, and milestone tracking.
10.1. Timeline Example
[docops,timeline,title="Project Timeline",scale="1",role="center"]
----
-
date: 1891
text: Mailbox, invented by Phillip Downing
-
date: 1923
text: The Three-Light Traffic Signal, invented by Garrett Morgan
-
date: 1932
text: Automatic Gear Shift, invented by Richard Spikes
date: July 23rd, 2023
text: DocOps extension Server releases a new feature, Timeline Maker
for [[https://github.com/asciidoctor/asciidoctorj asciidoctorj]]. With a simple text markup block you can
create very powerful timeline images. Enjoy!
-
date: August 15th, 2023
text: DocOps.io revamping website with updated documentation. All
our work will be updated with latest documentation for Panels,
for extension server are the various plug-ing for asciidoctorj.
-
date: September 1st, 2023
text: DocOps.io will begin work on revamping the asciidoctorj converter.
With the asciidoctorj 3.0.0 release coming we will need to migrate
custom plug-ins to the new version.
----
For more detailed information about timelines, see the Timeline Documentation.
11. Getting Started with DocOps.io Extension Server
To use the DocOps.io Extension Server in your project, follow these steps:
11.1. Maven Configuration
<dependency>
<groupId>io.docops</groupId>
<artifactId>docops-extension-server</artifactId>
<version>2024.00</version>
</dependency>
11.3. Integration with AsciiDoctorJ
// In your Java code
import org.asciidoctor.Asciidoctor;
import org.asciidoctor.jruby.extension.spi.ExtensionRegistry;
// Initialize AsciiDoctorJ with DocOps extensions
Asciidoctor asciidoctor = Asciidoctor.Factory.create();
ExtensionRegistry.registerExtension(asciidoctor);
// Process your AsciiDoc content
String html = asciidoctor.convert(asciiDocContent, options);
12. Conclusion
The DocOps.io Extension Server provides a rich set of tools for enhancing your AsciiDoctor documents with interactive and visually appealing elements. By using these extensions, you can create more engaging and informative documentation that better communicates complex information to your audience.
For more information and detailed documentation on each extension, visit the specific documentation pages linked throughout this guide.